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内 容 简介 


本 书 从 初学 者 角度 出 发 ， 通 过 通俗 易 懂 的 语言 、 丰 富 多 彩 的 实例 ， 详 细 介 绍 了 使 用 JavaScript 进行 程序 开发 需要 掌 
握 的 知识 。 全 书 分 为 20 章 ， 包 括 JavaScript 简介 、JavaScript 语言 基础 、JavaScript 基本 语句 、 函 数 、 自 定义 对 象 、 常 用 
内 部 对 象 、 数 组 、String 对 象 、JavaScript 事件 处 理 、 文 档 对 象 、 表 单 对 象 、 图 像 对 象 、 文 档 对 象 模型 (DOM) 、Window 
窗口 对 象 、Ajax 技术 、jQuery 基础 、jQuery 控制 页 面 、jQuery 事件 处 理 、jQuery 动画 效果 和 365 影视 网 站 设计 。 书 中 
所 有 知识 都 结合 具体 实例 进行 介绍 ， 涉 及 的 程序 代码 给 出 了 详细 的 注释 ， 可 以 使 读者 轻松 领会 JavaScript 程序 开发 的 精 
髓 ， 快 速 提高 开发 技能 。 另 外 ， 本 书 除了 纸 质 内 容 之 外 ， 配 书 资源 包 中 还 给 出 了 海量 开发 资源 库 ， 主 要 内 容 如 下 。 


视频 讲解 : 总 时 长 19 小 时 ， 共 186 集 技术 资源 库 : 800 页 技术 参考 文档 
实例 资源 库 : 400 个 实用 范例 测试 题库 系统 : 138 道 能 力 测试 题目 


面试 资源 库 : 369 个 企业 面试 真题 
本 书 适合 有 志 于 从 事 软件 开发 的 初学 者 、 高 校 计算 机 相关 专业 学 生 和 毕业 生 ， 也 可 作为 软件 开发 人 员 的 参考 手册 ， 
或 者 高 校 的 教学 参考 书 。 


本 书 封面 贴 有 清华 大 学 出 版 社 防伪 标签 ， 无 标签 者 不 得 销售 。 
版 权 所 有 ， 侵 权 必 究 。 侵 权 举 报 电 话 : 010-62782989 13701121933 
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前 言 


JavaScript 是 Web 页 面 中 的 一 种 脚本 编程 语言 ， 已 经 被 广泛 应 用 于 Web 应 用 开发 ， 能 够 为 网 页 添 
加 各 式 各 样 的 动态 功能 。 目 前 ， 大 多 数 高 校 的 计算 机 专业 和 IT 培训 学 校 ， 都 将 JavaScript 作为 教学 内 
容 之 一 ， 这 对 于 培养 学 生 的 计算 机 应 用 能 力 具 有 非常 重要 的 意义 。 


本 书 内 容 


本 书 提供 了 从 入 门 到 编程 高 手 所 必 备 的 各 类 知识 ， 共 分 3 篇 ， 大 体 结构 如 下 图 所 示 。 


快速 浏览 本 章 内 容 


人 入门 


高 手 


| | ”第 2 篇: 提高 篇 


1 快速 浏览 本 章 内 容 、 项 目 开发 全 过 程 、 
第 3 篇: 项 目 篇 i 


第 1 篇 : 基础 篇 。 本 篇 通过 JavaScript 简介 、JavaScript 语言 基础 、JavaScript 基本 语句 、 函 数 、 自 
定义 对 象 、 常 用 内 部 对 象 、 数 组 、String 对 象 、JavaScript 事件 处 理 、 文 档 对 象 等 内 容 的 介绍 ， 并 结 
合 大 量 的 图 示 、 实 例 、 视 频 和 实战 等 ， 使 读者 快速 掌握 JavaScript 语言 基础 ， 为 以 后 编程 黄 定 坚实 的 
基础 。 

第 2 篇 : 提高 篇 。 本 篇 介绍 了 表单 对 象 、 图 像 对 象 、 文 档 对 象 模型 (DOM) 、Window 窗口 对 象 、 
Ajax 技术 、jQuery 基础 、jQuery 控制 页 面 、jQuery 事件 处 理 、jQuery 动画 效果 等 内 容 。 学 习 完 本 篇 ， 
能 够 开发 一 些 中 小 型 应 用 程序 。 
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第 3 篇 : 项目 篇 。 本 篇 通过 一 个 完整 的 365 影视 网 站 设计 ， 运 用 软件 工程 的 设计 思想 ， 让 读者 学 
习 如 何 进行 Web 项 目的 实践 开发 。 书 中 按照 “系统 分 析 一 系统 设计 一 网 页 预览 一 关键 技术 一 首页 技术 
实现 一 查看 影片 详情 页 面 ”的 流程 进行 介绍 ， 带 领 读者 亲身 体验 开发 项 目的 全 过 程 。 


本 书 特点 
回 ”由 浅 入 深 ， 循 序 渐进 。 本 书 以 初 、 中 级 程序 员 为 对 象 ， 先 从 JavaScript 语言 基础 学 起 ， 再 学 习 


JavaScript 的 核心 技术 ， 然 后 学 习 JavaScript 的 高 级 应 用 ， 最 后 学 习 开 发 一 个 完整 项 目 。 讲 解 
过 程 中 步骤 详尽 ， 版 式 新 颖 ， 使 读者 在 阅读 时 一 目 了 然 ， 从 而 快速 掌握 书 中 内 容 。 


回 ”语音 视频 ， 讲 解 详 尽 。 为 便于 读者 直观 感受 程序 开发 的 全 过 程 ， 书 中 大 部 分 章节 都 配备 了 教 
学 微 视频 ， 这 些微 课 可 听 可 看 ， 能 快速 引导 初学 者 入 门 ， 感 受 编程 的 快乐 和 成 就 感 ， 进 一 步 
增强 学 习 的 信心 。 

回 ”实例 典型 ， 轻 松 易学 。 通 过 例子 学 习 是 最 好 的 学 习 方式 之 一 ， 本 书 通过 “一 个 知识 点 、 一 
个 例子 、 一 个 结果 、 一 段 评析 ， 一 个 综合 应 用 ”的 模式 ， 透彻 详 尽 地 讲述 了 实际 开发 中 所 需 
的 各 类 知识 。 另 外 ,为 了 便于 读者 阅读 程序 代码 ,快速 学 习 编程 技能 ， 书 中 几乎 每 行 代码 都 
提供 了 注释 。 

回 “” 精 彩 栏目 ， 贴 心 提 醒 。 本 书 根据 需要 在 各 章 安排 了 很 多 “注意 ”“ 说 明 ”“ 技 巧 ”等 小 栏 
目 ， 让 读者 可 以 在 学 习 过 程 中 更 轻松 地 理解 相关 知识 点 及 概念 ， 更 快 地 掌握 个 别 技术 的 应 用 
技巧 。 

回 ”实战 练习 ， 巩 固 所 学 。 书 中 大 部 分 章节 都 提供 了 2 一 3 个 实战 ， 并 给 出 了 实战 的 效果 ， 读 者 可 
以 根据 所 学 的 知识 ， 亲 自动 手 实现 这 些 实战 项 目 ， 如 果 在 实现 过 程 中 遇 到 问题 ， 可 以 从 资源 
包 中 获取 相应 实战 的 源码 ， 进 行 解读 。 

回 ” 紧 跟 潮流 ， 流 行 技术 。 本 书 采用 开发 JavaScript 程序 最 新 的 工具 一 一 WebStorm 实现 ， 使 读者 
能 够 紧 跟 技术 发 展 的 脚步 。 

本 书 资源 


为 帮助 读者 学 习 ， 本 书 配备 了 长 达 19 个 小 时 ( 共 186 集 ) 的 微 课 视 频 讲解 。 除 此 以 外 ， 还 为 读者 
提供 了 “Java Web 开发 资源 库 ” 系 统 ， 可 以 帮助 读者 快速 提升 编程 水 平和 解决 实际 问题 的 能 力 。 
本 书 和 Java Web 开发 资源 库 配 合 学 习 的 流程 如 图 所 示 。 
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Java Web 开发 资源 库 系统 的 主 界面 如 图 所 示 。 
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在 学 习 本 书 的 过 程 中 ， 可 以 配合 技术 资源 库 和 实例 资源 库 的 相应 内 容 ， 全 面 提升 个 人 综合 编程 技 
能 和 解决 实际 开发 问题 的 能 力 ， 为 成 为 软件 开发 工程 师 打 下 坚实 基础 。 

对 于 数学 逻辑 能 力 和 英语 基础 较为 薄弱 的 读者 ， 或 者 想 了 解 个 人 数学 逻辑 思维 能 力 和 编程 英语 基 
础 的 用 户 ， 本 书 提供 了 数学 及 逻辑 思维 能 力 测试 和 编程 英语 能 力 测试 以 供 练习 和 测试 。 

万 事 俱 备 ， 该 到 软件 开发 的 主 战场 上 接受 洗礼 了 。 面 试 资源 库 提供 了 大 量 国 内 外 软件 企业 的 常见 
面试 真题 ， 同 时 还 提供 了 程序 员 职 业 规划 、 程 序 员 面试 技巧 、 虚 拟 面试 系统 等 精彩 内 容 ， 是 程序 员 求 
职 面试 的 绝 佳 指 南 。 


读者 对 象 
回 “ 初 学 编程 的 自学 者 编程 爱好 者 
加 ”大 中 专 院 校 的 老师 和 学 生 加 ”相关 培训 机 构 的 老师 和 学 员 
回 ”做 毕业 设计 的 学 生 初 、 中 级 程序 开发 人 员 
回 ”程序 测 试 及 维护 人 员 加 参加 实习 的 “菜鸟 ”程序 员 
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读者 服务 


学 习 本 书 时 ， 请 先 扫 描 封底 的 权限 二 维 码 〈 需 要 刊 开 涂 层 ) 获取 学 习 权限 ， 然 后 即 可 免费 学 习 书 
中 的 所 有 线 上 线 下 资源 。 本 书 所 附 赠 的 各 类 学 习 资 源 ， 读 者 可 登录 清华 大 学 出 版 社 网 站 
(www.tup.com.cn) ， 在 对 应 图 书页 面 下 获取 其 下 载 方式 。 也 可 扫描 图 书 封 底 的 “ 文 泉 云 盘 ”二 维 码 ， 
获取 其 下 载 方式 。 

为 了 方便 解决 本 书 疑难 问题 ， 读 者 朋友 可 加 我 们 的 企业 QQ: 4006751066〔( 可 容纳 10 万 人 ) ， 也 
可 以 登录 www.mingrisoft.com 留言 ， 我 们 将 竭诚 为 您 服务 。 


致 读者 


本 书 由 明日 科技 JavaScript 程序 开发 团队 组 织 编写 ， 主 要 人 员 有 张 奢 、 王 小 科 、 赛 奎 春 、 李 茜 普 、 
周 佳 星 、 王 国 辉 、 李 舌 、 贾 景 波 、 赵 宁 、 申 小 琦 、 冯 春 龙 、 白 宏 健 、 何 平 、 申 野 、 辛 洪 郁 、 宋 万 勇 、 
杨 丽 、 高 春 艳 、 张 宝 华 、 张 云 饥 、 白 兆 松 、 杨 柳 、 岳 彩 龙 、 李 春 林 、 王 欢 、 依 莹 莹 、 张 博 洋 、 卞 妨 、 
刘 媛 媛 、 梁 英 、 胡 冬 、 于 水 晶 、 葛 忠 月 、 隋 妍 妍 、 刘 杰 、 潘 建 狼 、 李 雪 、 李 颖 、 宋 一 萌 、 朱 艳 红 、 谭 
畅 等 。 在 编写 过 程 中 ， 我 们 以 科学 、 严 谨 的 态度 ， 力 求 精益 求 精 ， 但 错误 、 玲 漏 之 处 在 所 难免 ， 冤 请 
广大 读者 批评 指正 。 

感谢 您 购买 本 书 ， 希 望 本 书 能 成 为 您 编程 路 上 的 领航 者 。 

祝 读书 快乐 ! 
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1.1.3 ”JavaScript 的 应 用 
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1.4 JavaScript 基本 语法 
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2.6.2 判断 12 岁 儿 童 是 否 可 以 免票 入 园 
2.6.3 ”判断 周 星 星 是 否 成 年 ……… 
py PE OE 


1.5.1 输出 由 “*” 组 成 的 菱形 
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3.3.1 _ continue 语句 
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3.4 异常 处 理 语句 
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本 篇 通过 JavaScript 简介 、JavaScript 语言 基础 、JavaScript 基本 语句 、 画 数 、 
自 定 义 对 象 、 常 用 内 部 对 象 、 数 组 、String 对 象 、JavaScript 事件 处 理 、 文 档 对 象 
等 内 容 的 介绍 , 并 结合 大 量 的 图 示 、 实 例 、 视 频 和 实战 等 ,使 读者 快速 掌 担 JavaScript 
语言 基础 ， 为 以 后 编程 鞭 定 坚实 的 基础 。 


第 == 
草 
JavaScript 简介 
(名 ! 视频 讲解 ，50 分 钟 ) 


在 学 习 Javascript 前 , 应 该 先 了 解 什么 是 JavasScript, JavaScript 都 有 哪些 将 点 ， 
JavaScript 的 编写 工具 以 及 在 HTML 中 的 使 用 等 内 容 ， 通 过 了 解 这 些 内 容 来 增强 对 
JavaScript 语言 的 理解 ， 以 方便 以 后 学 习 。 

通过 学 习 本 章 ， 读 者 主要 订 提 以 下 内 容 : 

JavaScript 简 述 

开发 工具 WebStorm 简介 

在 Web 页 面 中 使 用 JavaScript 的 方法 
JavaScript 基本 语法 


双双 学 


第 1 章 JavaScript 简介 


1.1 JavaScript 简 述 


JavaScript 是 Web 页 面 中 的 一 种 脚本 编程 语言 也 是 一 种 通用 的 、 跨 平台 的 、 基 于 对 象 和 事件 驱动 
并 具有 安全 性 的 脚本 语言 。 它 不 需要 进行 编译 ， 而 是 直接 嵌入 HTML 页 面 中 ， 把 静态 页 面 转变 成 支持 
用 户 交互 并 响应 相应 事件 的 动态 页 面 。 


1.1.1 JavaScript 的 起 源 


JavaScript 语言 的 前 身 是 LiveScript 语言 。 由 美国 Netscape〈 网 景 ) 公司 的 布 瑞 登 。 艾 克 (Brendan 
Eich) 为 即将 在 1995 年 发 布 的 Navigator 2.0 浏览 器 的 应 用 而 开发 的 脚本 语言 。 在 与 Sun ( 升 阳 ) 公司 
联手 及 时 完成 了 LiveScript 语言 的 开发 后 ,就 在 Navigator 2.0 即将 正式 发 布 前 ，Netscape 公司 将 其 改名 
为 JavaScript， 也 就 是 最 初 的 JavaScript 1.0 版 本 。 虽 然 当 时 JavaScript 1.0 版 本 还 有 很 多 缺陷 , 但 拥有 着 
JavaScript 1.0 版 本 的 Navigator 2.0 浏览 器 几乎 主宰 着 浏览 器 市 场 。 

因为 JavaScript 1.0 如 此 成 功 ，Netscape 公司 在 Navigator 3.0 中 发 布 了 JavaScript 1.1 版 本 。 同 时 微 
软 开始 进军 浏览 器 市 场 ， 发 布 了 Internet Explorer 3.0 并 搭载 了 一 个 JavaScript 的 类 似 版 本 ， 其 注册 名 称 
为 JScript， 这 成 为 JavaScript 语言 发 展 过 程 中 的 重要 一 步 。 

在 微软 进入 浏览 器 市 场 后 , 此 时 有 3 种 不 同 的 JavaScript 版 本 同时 存在 , Navigator 中 的 JavaScript、 
正 中 的 JScript 以 及 CEnvi 中 的 ScriptEase。 与 其 他 编程 语言 不 同 的 是 ，JavaScript 并 没有 一 个 标准 来 统 
一 其 语法 或 特性 ， 而 这 3 种 不 同 的 版 本 恰恰 突出 了 这 个 问题 。1997 年 ，JavaScript 1.1 版 本 作为 一 个 草 
案 提 交 给 欧洲 计算 机 制造 商 协 会 (ECMA)。 最 终 由 来 自 Netscape、Sun、 微 软 、Borland 和 其 他 一 些 对 
脚本 编程 感 兴趣 的 公司 的 程序 员 组 成 了 TC39 委员 会 ， 该 委员 会 被 委派 来 标准 化 一 个 通用 、 跨 平台 、 
中 立 于 厂商 的 脚本 语言 的 语法 和 语义 。TC39 委员 会 制定 了 “ECMAScript 程序 语言 的 规范 书 ”( 又 称 为 

“ECMA-262 标准 ”)， 该 标准 通过 国际 标准 化 组 织 (ISO) 采纳 通过 ， 作 为 各 种 浏览 器 生产 开发 所 使 用 
的 脚本 程序 的 统一 标准 。 


1.1.2” JavaScript 的 主要 特点 


JavaScript 脚本 语言 的 主要 特点 如 下 。 

加 ”解释 性 

JavaScript 不 同 于 一 些 编译 性 的 程序 语言 ， 例 如 C、C++ 等 ， 它 是 一 种 解释 性 的 程序 语言 ， 它 的 源 
代码 不 需要 经 过 编译 ， 而 直接 在 浏览 器 中 运行 时 被 解释 。 

基于 对 象 

JavaScript 是 一 种 基于 对 象 的 语言 。 这 意味 着 它 能 运用 自己 已 经 创建 的 对 象 。 因 此 ， 许 多 功能 可 以 
来 自 于 脚本 环境 中 对 象 的 方法 与 脚本 的 相互 作用 。 

事件 驱动 

JavaScript 可 以 直接 对 用 户 或 客户 输入 做 出 响应 , 无 须 经 过 Web 服务 程序 。 它 对 用 户 的 响应 ， 是 以 
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事件 驱动 的 方式 进行 的 。 所 谓 事件 驱动 ， 就 是 指 在 主页 中 执行 了 某 种 操作 所 产生 的 动作 ， 此 动作 称 为 
“事件 ”。 例 如 按 下 鼠标 、 移 动 窗口 、 选 择 菜单 等 都 可 以 视 为 事件 。 当 事件 发 生 后 ， 可 能 会 引起 相应 的 
事件 响应 。 

回 ” 跨 平台 

JavaScript 依赖 于 浏览 器 本 身 ， 与 操作 环境 无 关 ， 只 要 能 运行 浏览 器 的 计算 机 ， 并 支持 JavaScript 
的 浏览 器 就 可 以 正确 执行 。 

回 ”安全 性 

JavaScript 是 一 种 安全 性 语言 ， 它 不 允许 访问 本 地 的 硬盘 ， 并 不 能 将 数据 存 入 服务 器 上 ， 不 允许 对 
网 络 文档 进行 修改 和 删除 ， 只 能 通过 浏览 器 实现 信息 浏览 或 动态 交互 。 这 样 可 有 效 地 防止 数据 的 丢失 。 


1.1.3 JavaScript 的 应 用 


使 用 JavaScript 脚本 实现 的 动态 页 面 ， 在 Web 上 随处 可 见 。 下 面 将 介绍 几 种 JavaScript 常见 的 应 用 。 

回 ”验证 用 户 输入 的 内 容 

使 用 JavaScript 脚本 语言 可 以 在 客户 端 对 用 户 输入 的 数据 进行 验证 。 例如 在 制作 用 户 注册 信息 页 面 
时 ， 要 求 用 户 确认 密码 ， 以 确定 用 户 输入 的 密码 是 否 正确 。 如 果 用 户 在 “确认 密码 ”文本 框 中 输入 的 
信息 与 “注册 密码 ”文本 框 中 输入 的 信息 不 同 ， 将 弹出 相应 的 提示 信息 ， 如 图 1.1 所 示 。 

回 动画 效果 

在 浏览 网 页 时 ， 经 常会 看 到 一 些 动画 效果 ， 使 页 面 更 加 生动 。 使 用 JavaScript 脚本 语言 也 可 以 实现 
动画 效果 ， 例 如 在 页 面 中 实现 下 雪 的 效果 ， 如 图 1.2 所 示 。 


和 


.A 


图 1.1 验证 两 次 密码 是 否 相同 图 1.2 动画 效果 


窗口 的 应 用 

在 打开 网 页 时 经 常会 看 到 一 些 浮动 的 广告 窗口 ， 这 些 广告 窗口 是 某 些 网 站 的 盔 利 手段 之 一 。 我 们 
也 可 以 通过 JavaScript 脚本 语言 来 实现 ， 例 如 ， 如 图 1.3 所 示 的 广告 窗口 。 

文字 特效 

使 用 JavaScript 脚本 语言 可 以 使 文字 实现 多 种 特效 。 例 如 使 文字 旋转 ， 如 图 1.4 所 示 。 

明日 学 院 应 用 的 jQuery 效果 

在 明日 学 院 的 “读书 ”栏目 中 ， 应 用 jQuery 实现 了 滑动 显示 和 隐藏 子 菜单 的 效果 。 当 单 击 某 个 主 
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蕊 sql Server 范 例 宝 奥 》 | 明 


DE ss jl 


图 1.3 窗口 的 应 用 


个 ”多 多 


图 1.4 文字 特效 
回 “京东 网 上 商城 应 用 的 jQuery 效果 
在 京东 网 上 商城 的 话费 充值 页 面 ， 应 用 jQuery 实现 了 标签 页 的 效果 ， 当 选择 “话费 快 充 ” 选 项 卡 


时 ， 标 签 页 中 将 显示 话费 快 充 的 相关 内 容 ， 如 图 1.6 所 示 ， 当 选择 其 他 选项 卡 时 ， 标 签 页 中 将 显示 相应 
的 内 容 。 


图 书 分 类 | 国 后 后 保证 安全 快 重 话 雪 快 充 。 充 估 不 多 人 充值 。” 定 明 充值 


秒 动 端 开发 本 
i 充值 旋 值 300 元 ]100 元 ] 50 元 30 元 
前 端 开发 电 詹 

500 元 200 元 20 元 10 元 
I 
Emas tie: 98.00-100.00 元 
JavaScript ee 
图 1.5 明日 学 院 应 用 的 jQuery 效果 图 1.6 京东 网 上 商城 应 用 的 jQuery 效果 


回 ”应 用 Ajax 技术 实现 百度 搜索 提示 
在 百度 首页 的 搜索 文本 框 中 输入 要 搜索 的 关键 字 时 ， 下 方 会 自动 给 出 相关 提示 。 如 果 给 出 的 提示 
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有 符合 要 求 的 内 容 ， 可 以 直接 选择 ， 这 样 可 以 方便 用 户 。 例 如 ， 输 入 “明日 科 ” 后 ， 在 下 面 将 显示 如 
图 1.7 所 示 的 提示 信息 。 


CL 
日 ai 全 百度 | 明日 科 归 E 和 反 5 EE 
明日 科技 
明日 科技 之 星 
明日 科技 雇 网 
明日 科技 有 限 公司 


1.7 百度 搜索 提示 页 面 


1.2 WebStorm 简介 


编辑 JavaScript 程序 可 以 使 用 任何 一 种 文本 编辑 器 ， 如 Windows 中 的 记事 本 、 写 字 板 等 应 用 软件 。 
由 于 JavaScript 程序 可 以 嵌入 HTML 文件 中 ， 因 此 ， 读 者 可 以 使 用 任何 一 种 编辑 HTML 文件 的 工具 软 
件 ， 如 WebStorm 和 Dreamweaver 等 。 由 于 本 书 使 用 的 编写 工具 为 WebStorm， 所 以 这 里 只 对 该 工具 作 
简单 介绍 。 

WebStorm 是 JetBrains 公司 旗下 一 款 JavaScript 开发 工具 。 该 软件 支持 不 同 浏览 器 的 提示 ， 还 包括 
所 有 用 户 自 定义 的 函数 〈 项 目 中 )。 代 码 补 全 包含 了 所 有 流行 的 库 ， 如 jQuery、YUI、Dojo、Prototype 
等 。 被 广大 中 国 JavaScript 开发 者 誉 为 Web 前 端 开发 神器 、 最 强大 的 HIML5 编辑 器 、 最 智能 的 JavaScript 
IDE 等 。WebStorm 的 主 界面 如 图 1.8 所 示 。 


Cede ~ [EACode] - MSDONDINndechtml- We 33 
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et htnl |[body 
"mo 1DOCTYPE html> | 
v ol Chtml lang="“en”> 
蕊 ndenltm Chead) 
NN oternel Lbraries i 
“titlefitd/titley 
/head) 
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Ahtal) 
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图 1.8 WebStorm 的 主 界面 


A 
NCA. 
本 书 中 使 用 的 WebStorm 版 本 为 WebStorm 2016.3。 


第 1 章 JavaScript 简介 


1.3 ” JavaScript 在 HTML 中 的 使 用 


通常 情况 下 ， 在 Web 页 面 中 使 用 JavaScript 有 3 种 方法 : 一 种 是 在 页 面 中 直接 嵌入 JavaScript 代码 ; 
另 一 种 是 链接 外 部 JavaScript 文件 ， 一 种 是 作为 特定 标签 的 属性 值 使 用 。 下 面 分 别 对 这 3 种 方法 进行 
介绍 。 


1.3.1 在 页 面 中 直接 府 入 JavaScript 代码 


在 HTML 文档 中 可 以 使 用 <script>...</scrip 亿 标记 将 JavaScript 脚本 嵌入 其 中 ， 在 HTML 文档 中 可 
以 使 用 多 个 <script> 标 记 ， 每 个 <script> 标 记 中 可 以 包含 多 个 JavaScript 的 代码 集合 ， 并 且 各 个 <script> 
标记 中 的 JavaScript 代码 之 间 可 以 相互 访问 , 等 同 于 将 所 有 代码 放 在 一 对 <script>.…</script> 标 签 之 中 的 
效果 。<script> 标 记 常 用 的 属性 及 说 明 如 表 1.1 所 示 。 


表 1.1 <script> 标 记 常 用 的 属性 及 说 明 


设置 所 使 用 的 脚本 语言 及 版 本 
设置 一 个 外 部 脚本 文件 的 路 径 位 置 
设置 所 使 用 的 脚本 语言 ， 此 属性 已 代替 language 属性 
此 属性 表示 当 HTML 文档 加 载 完毕 后 再 执行 脚本 语言 


回 language 属性 
language 属性 指定 在 HTML 中 使 用 的 哪 种 脚本 语言 及 其 版 本 。language 属性 使 用 的 格式 如 下 : 
<script language="JavaScript1.5"> 


SO 四 


如 果 不 定 义 language 属性 ， 浏 览 器 默认 脚本 语言 为 JavaScript 1.0 版 本 。 


回 src 属性 
src 属性 用 来 指定 外 部 脚本 文件 的 路 径 ， 外 部 脚本 文件 通常 使 用 JavaScript 脚本 ， 其 扩展 名 为 js。 
src 属性 使 用 的 格式 如 下 : 


<script src="01.js"> 


回 type 属性 
type 属性 用 来 指定 HTML 中 使 用 的 是 哪 种 脚本 语言 及 其 版 本 ， 自 HTML 4.0 标准 开始 ， 推 荐 使 用 
type 属性 来 代替 language 属性 。type 属性 使 用 的 格式 如 下 : 


<script type="text/javascript"> 
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回 defer 属性 

defer 属性 的 作用 是 当 文 档 加 载 完毕 后 再 执行 脚本 ， 当 脚本 语言 不 需要 立即 运行 时 ， 设 置 defer 属 
性 后 ， 浏 览 器 将 不 必 等 待 脚本 语言 装载 ， 这 样 页 面 加 载 会 更 快 。 但 当 有 一 些 脚本 需要 在 页 面 加 载 过 程 
中 或 加 载 完成 后 立即 执行 时 ， 就 不 需要 使 用 defer 属性 。defer 属性 使 用 的 格式 如 下 : 

<script defer> 

【 例 1.01】 编写 第 一 个 JavaScript 程序 ， 在 WebStorm 工具 中 直接 嵌入 JavaScript 代码 ， 在 页 面 
中 输出 “我 喜欢 学 习 JavaScript”。( 实例 位 置 : 资源 包 \ 源 码 \01\1.01 ) 

具体 步骤 如 下 : 

(1) 启动 WebStorm， 如 果 还 未 创建 过 任何 项 目 ， 会 弹出 如 图 1.9 所 示 的 窗口 。 


国 


WebStorm 
ET 单 击 该 选项 
| | 


YConbgure - Got Help - 
图 1.9 ”WebStorm 欢迎 界面 
(2) 单 击 图 1.9 中 的 Create New Project 选项 ， 弹 出 创建 新 项 目 对 话 框 ， 如 图 1.10 所 示 。 在 该 对 


话 框 中 输入 项 目 名 称 “Code”， 并 选择 项 目 存储 路 径 ， 将 项 目 文件 夹 存储 在 计算 机 中 的 了 盘 ， 然 后 单 击 
Create 按钮 创建 项 目 。 


图 1.10 创建 新 项 目 对 话 框 
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(3) 在 项 目 名 称 Code 上 右 击 ， 然 后 在 弹出 的 快捷 菜单 中 选择 New 一 Directory 命令 ， 如 图 1.11 所 示 。 
(4) 弹出 新 建 目录 对 话 框 ， 如 图 1.12 所 示 ， 在 文本 框 中 输入 新 建 目录 的 名 称 “SL”， 然 后 单 击 
OK 按钮 ， 完 成 文件 夹 SL 的 创建 。 


— 一 es 
@ 单 击 鼠 标 右键 |; @ 选择 New 子 菜单 


Terative path Cul+Ah+Shift+C 总 TypeScript 


四 | @ 选择 Directory 命令 
Find in Path.. Cirl+Shift#F Papods Nie 
Replace in path cnsMR+R 区 Coffeescript Fle 
Inspect Code-. 叶 XSLT Siyleshost 


Befactor » Edit Fle Templates— 
Add to Favorites » 
Show Image Thumbnails Curl+Shift+T 
Local History » 


图 1.11 在 项 目 中 创建 目录 


(5) 按照 同样 的 方法 ， 在 文件 夹 SL 下 创建 本 章 实例 文件 夹 01， 在 该 文件 夹 下 创建 第 一 个 实例 文 
件 夹 01。 

(6) 在 第 一 个 实例 文件 夹 01 上 右 击 ， 然 后 在 弹出 的 快捷 菜单 中 选择 New 一 HTML File 命令 ， 如 
图 1.13 所 示 。 

(7) 弹出 新 建 HTML 文件 对 话 框 ， 如 图 1.14 所 示 ， 在 文本 框 中 输入 新 建文 件 的 名 称 “index”， 
然后 单 击 OK 按钮 ， 完 成 index.html 文件 的 创建 。 此 时 ， 开 发 工具 会 自动 打开 刚刚 创建 的 文件 ， 结 果 如 
图 1.15 所 示 。 


Cyl+Alt+sShift+C 六 TypeScript File| 


回 选择 HIML File 命 令 上 aa 
Fnd Usages 


Find in Path Cul+Shit+F YS Pug/Jade file 


”Neme: [odex [一 | 输入 文件 名 称 | ] 人 1 


Replace in Path.. Cl+shih+R 及 CoffeeScript Fie 

nepect code_ 时 XSLT Stylesheet 

Re » Edit File Templates_ 

Add to Favorites 上 

Show Image Thumbnails Ctrl+Shift+T 

图 1.13 在 文件 夹 下 创建 HTML 文件 图 1.14 新 建 HTML 文件 对 话 框 


(8) 将 实例 背景 图 片 bg.gif 复制 到 “E:\Code\SL\01\01” 目 录 下 ， 背 景 图 片 的 存储 路 径 为 “光盘 \ 
Code\SL\01\01”, 
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Hle Eiht View Novigate Code Refacnr Run Iock vcs Window Hep 
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htnl lang=ren7> 
head> 
‘<meta charset=“UTF-87> 


head 
body> 


/body> 
/html 


Ce) 


图 1.15 打开 新 创建 的 文件 


(9) 在 <title> 标 记 中 将 标题 设置 为 “第 一 个 JavaScript 程序 ”， 在 <body> 标 记 中 编写 JavaScript 代 
码 ， 如 图 1.16 所 示 。 


| 加 code a SL ol) O01 芒 indexhem 
| 四 para de 


htm body | script| 
CDTFE hial) 


cheady 

body background="bg. g1f"> 

《acript type= text/jovascript > 
document. mrite(" 候 喜欢 学 习 JavaSeript") 

/seripr> 


vaScript 代码 


9 ORF VHF oO 


图 1.16 在 WebStorm 中 编写 的 JavaScript 代码 
双击 “E:\Code\SL\01\01” 目 录 下 的 index.html 文件 ， 在 浏览 器 中 将 会 查看 到 运行 结果 ， 如 图 1.17 


GEECTRTTTYII3 | 
Er ET AI Roh 


图 1.17 程序 运行 结果 
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N/m 


I <scrip 人 > 标记 可 以 放 在 克 Web 0 页 pe 起 击 六 Do 
记 中 。 
(2) 脚本 中 使 用 的 document.write 是 JavaScript 语句 ， 其 功能 是 直接 在 页 面 中 输出 括号 中 的 内 容 。 


ee 


1.3.2 ”链接 外 部 JavaScript 文件 


在 Web 页 面 中 引入 JavaScript 的 另 一 种 方法 是 采用 链接 外 部 JavaScript 文件 的 形式 。 如 果 代码 比较 
复杂 或 是 同一 段 代码 可 以 被 多 个 页 面 所 使 用 ， 则 可 以 将 这 些 代 码 放置 在 一 个 单独 的 文件 中 《〈 保 存 文件 
的 扩展 名 为 js)， 然 后 在 需要 使 用 该 代码 的 Web 页 面 中 链接 该 JavaScript 文件 即 可 。 

在 Web 页 面 中 链接 外 部 JavaScript 文件 的 语法 格式 如 下 : 

<script type="text/javascript" src="javascriptjs"></script> 
Nm 

如 果 外 部 JavaScript 文件 保存 在 本 机 中 ，src 属性 可 以 是 绝对 路 径 或 是 相对 路 径 ; 如 果 外 部 
文件 保存 在 其 他 服务 器 中 ，src 属性 需要 指定 绝对 路 径 。 
【 例 1.02】 在 HTML 文件 中 调用 外 部 JavaScript 文件 ， 运 行 时 在 页 面 中 显示 对 话 框 ， 对 话 框 中 
输出 “我 喜欢 学 习 JavaScript”。( 实例 位 置 : 资源 包 \ 源 码 \01\1.02 ) 
具体 步骤 如 下 : 
(1) 在 本 章 实例 文件 夹 01 下 创建 第 二 个 实例 文件 夹 02。 
(2) 在 文件 夹 02 上 右 击 , 然后 在 弹出 的 快捷 菜单 中 选择 New 一 JavaScript File 命令 , 如 图 1.18 
所 示 。 


Directory 


加 选择 New 子 菜单 |Hmmt Fie 


ClrShifrR teecaipe ae 
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Show Image Thumbnails Cerl+Shift+T 


图 1.18 在 文件 夹 下 创建 JavaScript 文件 
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(3) 弹出 新 建 JavaScript 文件 对 话 框 ， 如 图 1.19 所 示 ， 在 文本 框 中 输入 JavaScript 文件 的 名 称 
“index”， 然 后 单 击 OK 按钮 ， 完 成 index-js 文件 的 创建 。 此 时 ， 开 发 工具 会 自动 打开 刚刚 创建 的 文件 。 


ne |index 姜 ] 输入 文件 名 称 | ] 人 1 


图 1.19 新 建 JavaScript 文件 对 话 框 
(4) 在 index.js 文件 中 编写 JavaScript 代码 ， 代 码 如 图 1.20 所 示 。 


加 Code 加 SL) 本 01) 加 02) 电 indcds) 
医 paed  ” 轧 旧 | 章 - 用 | 总 indewjs x | 


er EACode i alert( "我 言 欢 学 习 JavaScript“)， 
rm 


Y mol 


» mo 
7 02 


图 1.20 ”indexjs 文件 中 的 代码 


明 No 
| 代码 中 使 用 的 alert 是 JavaScript 语句 ， 其 功能 是 在 页 面 中 弹出 一 个 对 话 框 ， 对 话 框 中 显示 括号 
”中 的 内 容 。 

(5) 在 02 文件 夹 下 创建 index.html 文件 ， 在 该 文件 中 调用 外 部 JavaScript 文件 indexjs， 代 码 如 
图 1.21 所 示 。 
双击 index.html 文件 ， 运 行 结果 如 图 1.22 所 示 。 


Be Ed Yew Nevigue Code Reactor Run To VCS Werdow Hp 
Code 和 SL) 0 02 六 de 
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图 1.21 调用 外 部 JavaScript 文 件 图 1.22 程序 运行 结果 
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意 

(1) 在 外 部 JavaScript 文件 中 ， 不 能 将 代码 用 <script> 和 </scripf> 标 记 括 起 来 。 

(2 ) 在 使 用 src 属性 引用 外 部 JavaScript 文件 时 ，<script></scripf> 标 签 中 不 能 包含 其 他 JavaScript 
代码 。 

(3 ) 在 <scripf> 标 签 中 使 用 ste 属性 引用 外 部 JavaScript 文件 时 ，</scripf> 结 束 标签 不 能 省 略 。_， 


1.3.3 “作为 标签 的 属性 值 使 用 


在 JavaScript 脚本 程序 中 ， 有 些 JavaScript 代码 可 能 需要 立即 执行 ， 而 有 些 JavaScript 代码 可 能 需 
要 单 击 某 个 超 链接 或 者 触发 了 一 些 事件 (如 单 击 按钮 ) 之 后 才 会 执行 。 下 面 介绍 将 JavaScript 代码 作为 
标签 的 属性 值 使 用 。 


1. 通过 “javascript:” 调 用 

在 HTML 中 ， 可 以 通过 “javascript:” 的 方式 来 调用 JavaScript 的 函数 或 方法 。 示 例 代码 如 下 : 

<a href="javascript:alert(' 您 单 击 了 这 个 超 链接 ")"> 请 单 击 这 里 </a> 

在 上 述 代 码 中 通过 使 用 “javascript: ”来 调用 alert0 方 法 ， 但 该 方法 并 不 是 在 浏览 器 解析 到 
“javascript:” 时 就 立刻 执行 ， 而 是 在 单 击 该 超 链接 时 才 会 执行 。 

2. 与 事件 结合 调用 


JavaScript 可 以 支持 很 多 事件 ， 事 件 可 以 影响 用 户 的 操作 。 例 如 单 击 、 按 下 键盘 或 移动 鼠标 等 。 与 
事件 结合 ， 可 以 调用 执行 JavaScript 的 方法 或 函数 。 示 例 代 码 如 下 : 
<input type="button" value=" 单 击 按钮 "onclick="alert(' 您 单 击 了 这 个 按钮 )" /> 


在 上 述 代码 中 ，onclick 是 单 击 事件 ， 意 思 是 当 单 击 对 象 时 将 会 触发 JavaScript 的 方法 或 函数 。 


1.4 JavaScript 基本 语法 


JavaScript 作为 一 种 脚本 语言 ， 其 语法 规则 和 其 他 语言 有 相同 之 处 也 有 不 同 之 处 。 下 面 简单 介绍 
JavaScript 的 一 些 基本 语法 。 


1.4.1 执行 顺序 


JavaScript 程序 按照 在 HTML 文件 中 出 现 的 顺序 逐 行 执行 .如 果 需 要 在 整个 HTML 文件 中 执行 (如 
函数 、 全 局 变量 等 )， 最 好 将 其 放 在 HTML 文件 的 <head>...</head> 标 记 中 。 某 些 代码 ， 如 函数 体内 的 
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代码 ， 不 会 被 立即 执行 ， 只 有 当 所 在 的 函数 被 其 他 程序 调用 时 ， 该 代码 才 会 被 执行 。 
1.4.2 ”大 小 写 敏 感 


JavaScript 对 字母 大 小 写 是 敏感 〈 严 格 区 分 字母 大 小 写 ) 的 ， 也 就 是 说 ， 在 输入 语言 的 关键 字 、 函 
数 名 、 变 量 以 及 其 他 标识 符 时 ， 都 必须 采用 正确 的 大 小 写 形式 。 例 如 ， 变 量 usemame 与 变量 userName 
是 两 个 不 同 的 变量 ， 这 一 点 要 特别 注意 ， 因 为 同属 于 与 JavaScript 紧密 相关 的 HTML 是 不 区 分 大 小 写 
的 ， 所 以 很 容易 混淆 。 

各 注 总 

HTML 并 不 区 分 大 小 写 ,由 于 JavaScript 和 HTML 紧密 相连 ,这 一 点 很 容易 混淆 ,许多 JavaScript 
对 象 和 属性 都 与 其 代表 的 HTML 标签 或 属性 同名 ， 在 HTML 中 ， 这 些 名 称 可 以 以 任意 的 大 小 写 方 
式 输入 而 不 会 引起 混乱 ， 但 在 JavaScript 中 ， 这 些 名 称 通常 都 是 小 写 的 。 例 如 ，HTML 中 的 事件 处 
理 器 属性 ONCLICK 通常 被 声明 为 onClick 或 OnClick， 而 在 JavaScript 中 只 能 使 用 onclick。 


1.4.3 ”空格 与 换行 


在 JavaScript 中 会 忽略 程序 中 的 空格 、 换 行 和 制 表 符 , 除非 这 些 符号 是 字符 串 或 正则 表达 式 中 的 一 
部 分 。 因 此 ， 可 以 在 程序 中 随意 使 用 这 些 特 殊 符号 来 进行 排版 ， 让 代码 更 加 易于 阅读 和 理解 。 

JavaScript 中 的 换行 有 “ 断 句 ”的 意思 ， 即 换行 能 判断 一 个 语句 是 否 已 经 结束 。 如 以 下 代码 表示 两 
个 不 同 的 语句 。 


01 a=100 
02 return false 


如 果 将 第 2 行 代码 写成 : 


01 return 
02 false 


此 时 ，JavaScript 会 认为 这 是 两 个 不 同 的 语句 ， 这 样 会 产生 错误 。 
1.4.4 每 行 结 尾 的 分 号 可 有 可 无 


与 Java 语言 不 同 ，JavaScript 并 不 要 求 必须 以 分 号 (;) 作为 语句 的 结束 标记 。 如 果 语句 的 结束 处 
没有 分 号 ，JavaScript 会 自动 将 该 行 代码 的 结尾 作为 语句 的 结尾 。 
例如 ， 下 面 的 两 行 代码 都 是 正确 的 。 


01 alert(" 您 好 ! 欢迎 访问 我 公司 网 站 ! ") 
02 alert(" 您 好 ! 欢迎 访问 我 公司 网 站 !"); 
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MN 


. 意 
: 最 好 的 代码 编写 习惯 是 在 每 行 代码 的 结尾 处 加 上 分 号 ， 这 样 可 以 保证 每 行 代码 的 准确 性 。 


1.4.5 注释 


为 程序 添加 注释 可 以 起 到 以 下 两 种 作用 。 

(1) 可 以 解释 程序 某 些 语句 的 作用 和 功能 ， 使 程序 更 易于 理解 ， 通 常用 于 代码 的 解释 说 明 。 

(2) 可 以 用 注释 来 暂时 屏蔽 某 些 语句 ， 使 浏览 器 对 其 暂时 忽略 ， 等 需要 时 再 取消 注释 ， 这 些 语句 
就 会 发 挥 作 用 ， 通 常用 于 代码 的 调试 。 

JavaScript 提供 了 两 种 注释 符号 :“//” 和 “/*...*/”。 其中,“//” 用 于 单行 注释 ,，“/*...*/” 用 于 多 行 
注释 。 多 行 注 释 符号 分 为 开始 和 结束 两 部 分 ， 即 在 需要 注释 的 内 容 前 输入 “/*”， 同时 在 注释 内 容 结束 
后 输入 “*/” 表 示 注 释 结 束 。 下 面 是 单行 注释 和 多 行 注 释 的 示例 。 

01 /这 是 单行 注释 的 例子 

02 /这 是 多 行 注释 的 第 一 行 

03 ”这 是 多 行 注释 的 第 二 行 

04 on 

60500/ 

06 "这 是 多 行 注释 在 一 行 中 应 用 的 例子 */ 


1.5.1 输出 由 “*” 组 成 的 萎 形 


在 WebStorm 开发 环境 中 应 用 document write 语句 输出 由 “*” 组 成 的 菱形 ， 运 行 结果 如 图 1.23 所 
示 。( 实例 位 置 : 资源 包 \ 源 码 \0\ 实 战 \01 ) 


1.23 ”输出 由 “*” 组 成 的 萎 形 


1.5.2 输出 古诗 《 枫 桥 夜 泊 》 


在 WebStorm 开发 环境 中 应 用 alert 语句 输出 古诗 《 枫 桥 夜 泊 》， 运 行 结果 如 图 1.24 所 示 。( 实例 位 
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置 : 资源 包 \ 源 码 \OT\ 实 战 \02 ) 


1.24 输出 古诗 


1.6 小 结 


本 章 主要 对 JavaScript 的 初级 知识 进行 了 简单 的 介绍 ， 包 括 JavaScript 主要 具有 哪些 特点 、 主 要 用 
于 实现 哪些 功能 、JavaScript 语言 的 编辑 工具 、 在 HTML 中 的 使 用 和 基本 语法 等 , 通过 这 些 内 容 让 读者 
对 JavaScript 先 有 个 初步 的 了 解 ， 为 以 后 的 学 习 奠 定 基础 。 
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2 
第 章 
JavaScript 语言 基础 
(名 "视频 讲解 ，2 小 时 16 分 钟 ) 


JavaScript 脚本 语言 与 其 他 语言 一 样 有 着 自己 的 语言 基础 ， 从 本 章 开 始 将 介绍 
JavaScript 的 基础 知识 ， 本 章 将 对 JavaScript 的 数据 类 型 、 常 量 和 变量 以 及 运算 符 
和 表达 式 进 行 详细 讲解 。 
通过 学 习 本 章 ， 读 者 主要 事 担 以 下 内 容 : 

JavaScript 中 的 数据 类 型 
JavaScript 中 的 常量 和 变量 
JavaScript 运算 符 的 使 用 
JavaScript 中 的 表达 式 
数据 类 型 的 转换 规则 


上 


各 吾 吾 吾 至 
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2.1 数据 类 型 


JavaScript 的 数据 类 型 分 为 基本 数据 类 型 和 复合 数据 类 型 。 关 于 复合 数据 类 型 中 的 对 象 、 数 组 和 函 
数 等 ， 将 在 后 面 的 章节 进行 介绍 。 在 本 节 中 ， 将 详细 介绍 JavaScript 的 基本 数据 类 型 。JavaScript 的 基 
本 数据 类 型 有 数值 型 、 字 符 串 型 、 布 尔 型 以 及 两 个 特殊 的 数据 类 型 。 


2.1.1 数值 型 


数值 型 Cnumber) 是 JavaScript 中 最 基本 的 数据 类 型 。JavaScript 和 其 他 程序 设计 语言 (如 C 语言 
和 Java) 的 不 同 之 处 在 于 ， 它 并 不 区 别 整 型 数值 和 浮 点 型 数值 。 在 JavaScript 中 ， 所 有 的 数值 都 是 由 浮 
点 型 表示 的 。JavaScript 采用 IEEE754 标准 定义 的 64 位 浮 点 格式 表示 数字 ， 这 意味 着 它 能 表示 的 最 大 
值 是 1.7976931348623157e+308， 最 小 值 是 Se-324。 

当 一 个 数字 直接 出 现在 JavaScript 程序 中 时 ， 我 们 称 它 为 数值 直接 量 (numeric literal)。JavaScript 
支持 数值 直接 量 的 形式 有 几 种 ， 下 面 将 对 这 几 种 形式 进行 详细 介绍 。 


1/ 


二 
在 任何 数值 直接 量 前 加 负 号 〔(- ) 可 以 构成 它 的 负数 。 但 是 负 号 是 一 元 求 反 运算 符 ， 它 不 是 数 
值 直接 量 语法 的 一 部 分 。 


1， 十 进 制 
在 JavaScript 程序 中 ， 十 进 制 的 整数 是 一 个 由 0~9 组 成 的 数字 序列 。 例 如 : 


0 

6 

2 

100 

JavaScript 的 数字 格式 允许 精确 地 表示 -900719925474092(-2”) 和 900719925474092 (2”) 之 间 
的 所 有 整数 (包括 -900719925474092(-2”) 和 900719925474092 (23 ))。 但 是 使 用 超过 这 个 范围 的 整 
数 ， 就 会 失去 尾数 的 精确 性 。 需 要 注意 的 是 ，JavaScript 中 的 某 些 整数 运算 是 对 32 位 的 整数 执行 的 ， 
它们 的 范围 从 -2147483648 (-231) 到 2147483647 (23-1)。 


2. 八进制 


尽管 ECMAScript 标准 不 支持 八进制 数据 ， 但 是 JavaScript 的 菜 些 实现 却 允 许 采用 八进制 (以 8 为 
基数 ) 格式 的 整 型 数据 。 八 进 制 数 据 以 数字 0 开头 ， 其 后 跟随 一 个 数字 序列 ， 这 个 序列 中 的 每 个 数字 
都 在 0 和 7 之 间 (包括 0 和 7)， 例 如 : 


07 
0366 
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由 于 某 些 JavaScript 实现 支持 八进制 数据 ,而 有 些 则 不 支持 , 所 以 最 好 不 要 使 用 以 0 开头 的 整 型 数 
为 不 知道 某 个 JavaScript 的 实现 是 将 其 解释 为 十 进 制 ， 还 是 解释 为 八进制 。 


据 ， 因 
3. 


六 进 制 


的 某 个 


十 六 进 制 


JavaScript 不 但 能 够 处 理 十 进 制 的 整 型 数据 ， 还 能 识别 十 六 进 制 ( 以 16 为 基数 ) 的 数据 。 所 谓 十 


数据 ， 是 以 “0X” 或 “0x” 开 头 ， 其 后 跟随 十 六 进 制 的 数字 序列 。 十 六 进 制 的 数字 可 以 是 0 到 
9 中 的 某 个 数字 ， 也 可 以 是 a(A) 到 f(F) 中 的 某 个 字母 ， 它 们 用 来 表示 0 到 15 之 间 (包括 0 和 15) 


值 ， 下 面 是 十 六 进 制 整 型 数据 的 例子 : 


Oxff 
0X123 
OxCAFE911 


例 2.01】 网 页 中 的 颜色 RGB 代码 是 以 十 六 进 制 数字 表示 的 。 例 如 ， 在 颜色 代码 #6699FF 中 ， 


十 六 进 制 数字 66 表示 红色 部 分 的 色 值 , 十 六 进 制 数字 99 表示 绿色 部 分 的 色 值 ,十 六 进 制 数字 FF 表示 
蓝 色 部 分 的 色 值 。 在 页 面 中 分 别 输出 RGB 颜色 #6699FF 的 3 种 颜色 的 色 值 。 代 码 如 下 :〈 实例 位 置 : 


资源 包 


01 
02 
03 
04 
05 
06 


执 

4. 

浮 

以 下 两 

( 

传 
部 分 。 


\ 源 码 \02\2.01 ) 
<script type="text/javascript"> 


document.write("RGB 颜色 #6699FF 的 3 种 颜色 的 色 值 分 别 为 :“"); 


document.write("<p>R: "+0x66); 
document write("<br>G: "+0x99); 
document.write("<br>B: "+0xFF); 
</script> 


行 上 面 的 代码 ， 运 行 结果 如 图 2.1 所 示 。 
浮 点 型 数据 


点 型 数据 可 以 具有 小 数 点 ， 它 的 表示 方法 有 
种 。 

1) 传统 记 数 法 

统 记 数 法 是 将 一 个 浮 点 数 分 为 整数 部 分 、 小 
小 数 部 分 ， 如 果 整 数 部 分 为 0， 可 以 省 略 整数 
例如 : 


1 


56. 


.9963 


.236 


( 


2) 科学 记 数 法 


// 输 出 字符 串 

// 输 出 红色 色 值 
// 输 出 绿色 色 值 
/| 输出 蓝 色色 值 


= 


本 给 出 江 、 保 、 一 3 位 妥 .x 
二 看 MV) 收 荡 交 (入 工具 TT) 部 且 (H) 


图 2. 


输出 RGB 颜色 #6699FF 的 3 种 颜色 的 色 值 


此 外 ， 还 可 以 使 用 科学 记 数 法 表示 浮 点 型 数据 ， 即 实数 后 跟随 字母 e 或 E， 后 面 加 上 一 个 带 正 号 


或 负 号 


6e 


的 整数 指数 ， 其 中 正 号 可 以 省 略 。 例 如 : 


+3 


3.12e11 
1.234E-12 


NC 
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在 科学 记 数 法 中 ，e (或 卫 ) 后 面 的 整数 表示 10 的 指数 次 震 ， 因 此 ， 这 种 记 数 法 表示 的 数值 等 
于 前 面 的 实数 乘 以 10 的 指数 次 堆 。 


【 例 2.02】 输出 “3er6”“3.5e3”“1.236E-2” 这 3 种 不 同形 式 的 科学 记 数 法 表示 的 浮 点 数 ， 代 


码 如 下 


01 
02 
03 
04 
05 
06 
07 
08 
09 


执行 上 面 的 代码 ， 运 行 结果 如 图 2.2 所 示 。 
5. 特殊 值 Infinity 


在 JavaScript 中 有 一 个 特殊 的 数值 Infinity (无 穷 
大 )， 如 果 一 个 数值 超出 了 JavaScript 所 能 表示 的 最 大 
值 的 范围 ，JavaScript 就 会 输出 Infinity; 如 果 一 个 数 


( 实例 位 置 : 资源 包 \ 源 码 \02\2.02 ) 


<script type="text/javascript"> 
document.write(" 科 学 记 数 法 表示 的 浮 点 数 的 输出 结果 :"); 
document.write("<p>"); 

document.write(3e+6); 

document.write("<br>"); 

document.write(3.5e3); 

document.write("<br>"); 

document.write(1.236E-2); 

</script> 


值 超出 了 JavaScript 所 能 表示 的 最 小 值 的 范围 ， 
JavaScript 就 会 输出 -Infinity。 例 如 : 


01 
02 
03 


document.write(1/0); 
document.write("<br>"); 
document.write(-1/0); 


运行 结果 为 : 


Infinity 
-Infinity 


6. 特殊 值 NaN 


JavaScript 中 还 有 一 个 特殊 的 数值 NaN (Not a Number 的 简写 )， 即 “ 非 数 字 ”。 在 进行 数学 运算 时 
产生 了 未 知 的 结果 或 错误 ，JavaScript 就 会 返回 NaN， 它 表示 该 数学 运算 的 结果 是 一 个 非 数 字 。 例 如 ， 
用 0 除 以 0 的 输出 结果 就 是 NaN， 代 码 如 下 : 


alert(0/0); 


运行 结果 为 : 


NaN 


20 
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科学 记 玫 法 表示 的 泽 点 数 的 输出 结果 ， 
3000000 

3500 

0.01236 


// 输 出 字符 串 
// 输 出 段落 标记 
// 输 出 浮 点 数 
// 输 出 换行 标记 
// 输 出 浮 点 数 
// 输 出 换行 标记 
// 输 出 浮 点 数 


工具 Mm 六 二 (H) 


图 2.2 输出 科学 记 数 法 表示 的 浮 点 数 


// 输 出 1 除 以 0 的 值 
/| 输出 换行 标记 
// 输 出 -1 除 以 0 的 值 


// 输 出 0 除 以 0 的 值 
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2.1.2 ”字符 串 型 


字符 串 〈string) 是 由 0 个 或 多 个 字符 组 成 的 序列 ， 它 可 以 包含 大 小 写字 母 、 数 字 、 标 点 符号 或 其 
他 字符 ， 也 可 以 包含 汉字 。 它 是 JavaScript 用 来 表示 文本 的 数据 类 型 。 程 序 中 的 字符 串 型 数据 是 包含 在 
单 引号 或 双 引号 中 的 ， 由 单 引 号 定 界 的 字符 串 中 可 以 含有 双 引 号 ， 由 双 引 号 定 界 的 字符 串 中 也 可 以 含 
有 单 引号 。 


/. 
:说明 
空 字符 囊 不 包含 任何 字符 ， 也 不 包含 任何 室 格 ， 用 一 对 引号 表示 ， 即 "或 "。 


例如 : 
(1) 单 引号 括 起 来 的 字符 串 ， 代 码 如 下 : 


"你 好 JavaScript 
"mingrisoft@mingrisoft.com 


(2) 双 引 号 括 起 来 的 字符 串 ， 代 码 如 下 : 


"你 好 JavaScript" 
(3) 单 引号 定 界 的 字符 串 中 可 以 含有 双 引 号 ， 代 码 如 下 : 


"abc'efg' 
"你 好 "JavaScript" 


(4) 双 引 号 定 界 的 字符 串 中 可 以 含有 单 引 号 ， 代 码 如 下 : 


"I'm legend" 
"You can call me Tom'™" 


意 
包含 字符 串 的 引号 必须 匹配 ， 如 果 字 符 串 前 面 使 用 的 是 双 引 号 ， 那 么 在 字符 串 后 面 也 必须 使 用 
双 引 号 ， 反 之 都 使 用 单 引 号 。 


有 的 时 候 ， 字 符 串 中 使 用 的 引号 会 产生 匹配 混乱 的 问题 。 例 如 : 
"字符 串 是 包含 在 单 引号 或 双 引号 "中 的 " 


对 于 这 种 情况 ， 必 须 使 用 转 义 字符 。JavaScript 中 的 转 义 字符 是 “\”， 通 过 转 义 字 符 可 以 在 字符 串 
中 添加 不 可 显示 的 特殊 字符 ,或 者 防止 引号 匹配 混乱 的 问题 。 例 如 ， 字 符 串 中 的 单 引号 可 以 使 用 “\” 
来 代替 ， 双 引号 可 以 使 用 “\"” 来 代替 。 因 此 ， 上 面 一 行 代码 可 以 写成 如 下 的 形式 : 


"字符 串 是 包含 在 单 引号 \' 或 双 引 号 \" 中 的 " 
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JavaScript 常用 的 转 义 字符 如 表 2.1 所 示 。 
表 2.1 JavaScript 常用 的 转 义 字符 


描 述 描 述 
由 | 退 格 垂直 制 表 符 
un 换行 符 回 车 符 
vt 水 平 制 表 符 ，Tab 空格 反 和 斜 杠 


八进制 整数 ， 范 围 为 000~777 
十 六 进 制 整数 ， 范 围 为 00~FF 
十 六 进 制 编码 的 Unicode 字符 


例如 ， 在 alert 语句 中 使 用 转 义 字符 “nm” 的 代码 如 下 : 

alert(" 网 页 设计 基础 : nHTML\nCSS\nJavaScript"); /输出 换行 字符 串 

运行 结果 如 图 2.3 所 示 。 

由 图 2.3 可 知 ， 转 义 字符 “\n” 在 警告 框 中 会 产生 换行 ， 但 是 在 “document.write0;” 语 句 中 使 用 转 
义 字符 时 ， 只 有 将 其 放 在 格式 化 文本 块 中 才 会 起 作用 ， 所 以 脚本 必须 放 在 <pre> 和 </pre> 的 标签 内 。 

例如 ， 下 面 是 应 用 转 义 字符 使 字符 串 换行 ， 程 序 代码 如 下 : 


01 document.write("<pre>"); /| 输出 <pre> 标 记 
02 ”document.write(" 轻 松 学 习 \nJavaScript 语言 ! "); /| 输出 换行 字符 串 
03 document.write("</pre>"); /| 输出 </pre> 标 记 


运行 结果 如 图 2.4 所 示 。 


三 网 页 的 汪 


网 页 设计 基础 
HTML 

CSS 
Javascript 


图 2.3 换行 输出 字符 串 图 2.4 换行 输出 字符 串 
如 果 上 述 代码 不 使 用 <pre> 和 </pre> 的 标签 ， 则 转 义 字符 不 起 作用 ， 代 码 如 下 : 
document.write(" 轻 松 学 习 \nJavaScript 语言 !"); /| 输出 字符 串 
运行 结果 为 : 


轻松 学 习 JavaScript 语言 ! 


【 例 2.03】 在 <pre> 和 </pre> 的 标签 内 使 用 转 义 字符 ， 分 别 输出 前 NBA 球星 奥尼尔 的 中 文 名 、 
英文 名 以 及 别名 ， 关 键 代 码 如 下 :( 实例 位 置 : 资源 包 \ 源 码 \02\2.03 ) 


01 <scripttype="text/javascript"> 
02 document.write('‘<pre>"); /| 输出 <pre> 标 记 
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03 ”document.write(' 中 文 名 : 沙 奎 尔 - 奥尼尔 '); /| 输出 奥尼尔 中 文 名 
04 ”document.write("\n 英文 名 : Shaquille OVNeal"); /| 输出 奥尼尔 英文 名 
05 ”document.write("\n 别名 : 大 状 鱼 "); /| 输出 奥尼尔 别名 
06 document.write('</pre>"); // 输 出 </pre> 标 记 
07 </script> 


实例 运行 结果 如 图 2.5 所 示 。 
由 上 面 的 实例 可 以 看 出 ， 在 单 引 号 定义 的 字符 串 内 出 去 
现 单 引号 ， 必 须 进 行 转 义 才能 正确 输出 。 EE 
5 


2.1.3 布尔 型 


数值 数据 类 型 和 字符 串 数 据 类 型 的 值 都 无 穷 多 ， 但 是 ”图 25 输出 奥尼尔 的 中 文 名 、 英 文 名 和 别名 
布尔 数据 类 型 只 有 两 个 值 ， 一 个 是 tue ( 真 )， 一 个 是 false 
( 假 )， 它 说 明了 某 个 事物 是 真 还 是 假 。 

布尔 值 通常 在 JavaScript 程序 中 用 来 作为 比较 所 得 的 结果 。 例 如 : 


n==1 


这 行 代码 测试 了 变量 n 的 值 是 否 和 数值 1 相等 。 如 果 相 等 ， 比 较 的 结果 就 是 布尔 值 tue， 否 则 结 
果 就 是 false。 

布尔 值 通常 用 于 JavaScript 的 控制 结构 。 例 如 ，JavaScript 的 if/else 语句 就 是 在 布尔 值 为 tue 时 执 
行 一 个 动作 ， 而 在 布尔 值 为 false 时 执行 另 一 个 动作 。 通 常 将 一 个 创建 布尔 值 与 使 用 这 个 比较 的 语句 结 
合 在 一 起 。 例 如 : 


01 if(n==1) // 如 果 n 的 值 等 于 1 
02 m=m+1; Wim 的 值 加 1 

03 else 

04 n=n+1; ln 的 值 加 1 


本 段 代码 检 测 n 是 否 等 于 1。 如 果 相 等 ， 就 给 m 的 值 加 1， 否 则 给 n 的 值 加 1。 

有 时 候 可 以 把 两 个 可 能 的 布尔 值 看 作 是 on (true) 和 off (false), 或 者 看 作 是 yes (true) 和 no (false)， 
这 样 比 将 它们 看 作 是 tue 和 false 更 为 直观 。 有 时 候 把 它们 看 作 是 1 (tue) 和 0 (false) 会 更 加 有 用 ( 实 
际 上 JavaScript 确实 是 这 样 做 的 ， 在 必要 时 会 将 true 转换 成 1， 将 false 转换 成 0)。 


2.1.4 ”特殊 数据 类 型 


1. 未 定义 值 
未 定义 值 就 是 undefined， 表 示 变 量 还 没有 赋值 (如 “var a; ”)。 
2. 空 值 (nul) 


JavaScript 中 的 关键 字 null 是 一 个 特殊 的 值 ， 它 表示 为 空 值 ， 用 于 定义 空 的 或 不 存在 的 引用 。 这 里 
必须 要 注意 的 是 ，null 不 等 同 于 空 的 字符 串 ("") 或 0。 当 使 用 对 象 进行 编程 时 可 能 会 用 到 这 个 值 。 
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由 此 可 见 ，null 与 undefined 的 区 别 是 ，null 表示 一 个 变量 被 赋予 了 一 个 空 值 ， 而 undefined 则 表示 
该 变量 尚未 被 赋值 。 


2.2 常量 和 变量 


每 一 种 计算 机 语言 都 有 自己 的 数据 结构 。 在 JavaScript 中 , 常量 和 变量 是 数据 结构 的 重要 组 成 部 分 。 
本 节 将 介绍 常量 和 变量 的 概念 以 及 变量 的 使 用 方法 。 


2.2.1 常量 


常量 是 指 在 程序 运行 过 程 中 保持 不 变 的 数据 。 例 如 ，123 是 数值 型 常量 ,“JavaScript 脚本 ”是 字符 
串 型 常量 ，true 或 false 是 布尔 型 常量 等 。 在 JavaScript 脚本 编程 中 可 直接 输入 这 些 值 。 


2.2.2 变量 


变量 是 指 程序 中 一 个 已 经 命名 的 存储 单元 ， 它 的 主要 作用 就 是 为 数据 操作 提供 存放 信息 的 容器 。 
变量 是 相对 常量 而 言 的 。 常 量 是 一 个 不 会 改变 的 固定 值 ， 而 变量 的 值 可 能 会 随 着 程序 的 执行 而 改变 。 
变量 有 两 个 基本 特征 ， 即 变量 名 和 变量 值 。 为 了 便于 理解 ， 可 以 把 变量 看 作 是 一 个 贴 着 标签 的 盒子 ， 
标签 上 的 名 字 就 是 这 个 变量 的 名 字 ( 即 变量 名 )， 而 盒子 里 面 的 东西 就 相当 于 变量 的 值 。 对 于 变量 的 使 
用 必须 明确 变量 的 命名 、 变 量 的 声明 、 变 量 的 赋值 以 及 变量 的 类 型 。 

1 变量 的 命名 


JavaScript 变量 的 命名 规则 如 下 。 

必须 以 字母 或 下 画 线 开头 ， 其 他 字符 可 以 是 数字 、 字 母 或 下 夯 线 。 

变量 名 不 能 包含 空格 或 加 号 、 减 号 等 符号 。 

JavaScript 的 变量 名 是 严格 区 分 大 小 写 的。 例如, UserName 与 usermame 代表 两 个 不 同 的 变量 。 
不 能 使 用 JavaScript 中 的 关键 字 。JavaScript 中 的 关键 字 如 表 2.2 所 示 。 


表 2.2 JavaScript 的 关键 字 


加 回回 加 


double 


else 


extends 
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ah 
入 轨 
JavaScript 关键 字 (Reserved Words ) 是 指 在 JavaScript 语言 中 有 特定 含义 ， 成 为 JavaScript 语 
法 中 一 部 分 的 那些 字 。JavaScript 关键 字 是 不 能 作为 变量 名 和 二 数 名 使 用 的 。 使 用 JavaScript 关键 字 
作为 变量 名 或 函数 名 ， 会 使 JavaScript 在 载 入 过 程 中 出 现 语法 错误 。 


a 
说 明 
虽然 JavaScript 的 变量 可 以 任意 命名 ， 但 是 在 进行 编程 时 ， 最 好 还 是 使 用 便于 记忆 、 且 有 意义 
的 变量 名 称 ， 以 增加 程序 的 可 读 性 。 


2. 变量 的 声明 
在 JavaScript 中 ，JavaScript 变量 由 关键 字 var 声明 ， 语 法 格式 如 下 : 
var variablename; 


variablename 是 声明 的 变量 名 ， 例 如 ， 声 明 一 个 变量 usemame， 代 码 如 下 : 


var username; /声明 变量 username 

另外 ， 可 以 使 用 一 个 关键 字 var 同时 声明 多 个 变量 ， 例 如 : 

var a,b,c; /同时 声明 a、b 和 c 3 个 变量 
3. 变量 的 赋值 


在 声明 变量 的 同时 也 可 以 使 用 等 于 号 (=) 对 变量 进行 初始 化 赋值 ， 例 如 ， 声 明 一 个 变量 lesson 并 
对 其 进行 赋值 ， 值 为 一 个 字符 串 “ 零 基础 学 JavaScript”， 代 码 如 下 : 


Var lesson=" 零 基础 学 JavaScript"; // 声 明 变量 并 进行 初始 化 赋值 
另外 ， 还 可 以 在 声明 变量 之 后 再 对 变量 进行 赋值 ， 例 如 : 

01 varlesson; /声明 变量 

02 ”lesson=" 零 基础 学 JavaScript"; // 对 变量 进行 赋值 


在 JavaScript 中 ， 变 量 可 以 不 先 声明 而 直接 对 其 进行 赋值 。 例 如 ， 给 一 个 未 声明 的 变量 赋值 ， 然 后 
输出 这 个 变量 的 值 ， 代 码 如 下 : 


01 ”str = "这 是 一 个 未 声明 的 变量 "; /给 未 声明 的 变量 赋值 
02 document.write(str); // 输 出 变量 的 值 
运行 结果 为 : 


这 是 一 个 未 声明 的 变量 
虽然 在 JavaScript 中 可 以 给 一 个 未 声明 的 变量 直接 进行 赋值 ， 但 是 建议 在 使 用 变量 前 就 对 其 声明 ， 
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因为 声明 变量 的 最 大 好 处 就 是 能 及 时 发 现代 码 中 的 错误 。 由 于 JavaScript 是 采用 动态 编译 的 ， 而 动态 编 
译 是 不 易于 发 现代 码 中 的 错误 的 ， 特 别 是 变量 命名 方面 的 错误 。 


SO 四 
(1) 如 果 只 是 声明 了 变量 ， 并 未 对 其 赋值 ， 则 其 值 默认 为 undefined。 
(2) 可 以 使 用 var 语句 重复 声明 同一 个 变量 ， 也 可 以 在 重复 声明 变量 时 为 该 变量 赋 一 个 新 值 。 
例如 ， 声 明 一 个 未 赋值 的 变量 a 和 一 个 进行 重复 声明 的 变量 b， 并 输出 这 两 个 变量 的 值 ， 代 码 
如 下 : 


01 vara; /声明 变量 a 

02 var b=" 你 好 JavaScript"; // 声 明 变量 b 并 初始 化 
03 var b = " 零 基础 学 JavaScript"; /重复 声明 变量 b 

04 document.write(a); /| 输出 变量 a 的 值 

05 document.write("<br>"); // 输 出 换行 标记 

06 document.write(b); // 输 出 变量 b 的 值 
运行 结果 为 

undefined 

零 基础 学 JavaScript 


意 
在 JavaScript 中 的 变量 必须 要 先 定义 (用 Var 关键 字 声 明 或 给 一 个 未 声明 的 变量 直接 赋值 ) 后 
使 用 ， 没 有 定义 过 的 变量 不 能 直接 使 用 。 


4. 变量 的 类 型 


变量 的 类 型 是 指 变量 的 值 所 属 的 数据 类 型 ， 可 以 是 数值 型 、 字 符 串 型 和 布尔 型 等 ， 因 为 JavaScript 
是 一 种 弱 类 型 的 程序 语言 ， 所 以 可 以 把 任意 类 型 的 数据 赋值 给 变量 。 

例如 ， 先 将 一 个 数值 型 数据 赋值 给 一 个 变量 ， 在 程序 运行 过 程 中 ， 可 以 将 一 个 字符 串 型 数据 赋值 
给 同一 个 变量 ， 代 码 如 下 : 

01 varnum=100; /定义 数值 型 变量 

02 ”num=" 有 一 条 路 ， 走 过 了 总 会 想起 " ; // 定 义 字符 串 型 变量 


【 例 2.04】 科比 ， 布 莱恩 特 是 前 NBA 最 著名 的 篮球 运动 员 之 一 。 将 科比 的 别名 、 身 高 、 总 得 
分 、 主 要 成 就 以 及 场 上 位 置 分 别 定义 在 不 同 的 变量 中 ， 并 输出 这 些 信息 ， 关 键 代 码 如 下 : ( 实例 位 置 : 
资源 包 \ 源 码 \02\2.04 ) 


01 <scripttype="text/javascript"> 


02 var alias = "小 飞 侠 "; /定义 别名 变量 
03 var height = 198; /定义 身高 变量 
04 var score = 33643; /定义 总 得 分 变量 
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05 ”var achievement = "五 届 NBA 总 冠军 "; 
06 ”var position = "得 分 后 卫 / 小 前 锋 "; 

07 ”document.write(" 别 名 :"); 

08 document.write(alias); 

09 ”document.write("<br> 身 高 :"); 

10 document.write(height); 

11 ”document.write(" 厘 米 <br> 总 得 分 :"); 
12 document.write(score); 

13 ”document.write(" 分 <br> 主 要 成 就 :“"); 
14 document.write(achievement); 

15 document.write("<br> 场 上 位 置 :"); 
16 document.write(position); 

17 </script> 


实例 运行 结果 如 图 2.6 所 示 。 
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// 定 义 主要 成 就 变量 

// 定 义 场 上 位 置 变量 

// 输 出 字符 串 

// 输 出 变量 alias 的 值 
/输出 换行 标记 和 字符 串 
/| 输出 变量 height 的 值 
/输出 换行 标记 和 字符 串 
// 输 出 变量 score 的 值 
// 输 出 换行 标记 和 字符 串 
// 输 出 变量 achievement 的 值 
// 输 出 换行 标记 和 字符 串 
// 输 出 变量 position 的 值 


(Bl EACode\sWoZ\04Winc 吕 ” 忆 | 居 泡 二 于 人 四 


文件 中 六 种 (E) 


至 看 V) 


Er 工具 (大 对 (H) 


科比 ' 布 莱恩 特 


别名 : 小 飞 侠 


身高 : 198 厘 米 


总 得 分 : 33643 分 
主要 成 就 : 五 届 NBA 总 冠军 
场 上 位 置 : 得 分 后 卫 /小 前 锋 


图 2.6 输出 球员 信息 


2.3 


运算 符 也 称 为 操作 符 ， 


运 


A 


算 符 


它 是 完成 一 系列 操作 的 符号 。 运 算 符 用 于 将 一 个 或 几 个 值 进行 计算 而 生成 


一 个 新 的 值 ， 对 其 进行 计算 的 值 称 为 操作 数 ， 操 作 数 可 以 是 常量 或 变量 。 
JavaScript 的 运算 符 按 操 作 数 的 个 数 可 以 分 为 单 目 运算 符 、 双 目 运算 符 和 三 目 运算 符 ; 按 运算 符 的 
功能 可 以 分 为 算术 运算 符 、 比 较 运算 符 、 赋 值 运算 符 、 字 符 串 运算 符 、 逻 辑 运算 符 、 条 件 运算 符 和 其 


他 运算 符 。 


2.3.1 算术 运算 符 


算术 运算 符 用 于 在 程序 中 进行 加 、 减 、 乘 、 除 等 运算 。 在 JavaScript 中 常用 的 算术 运算 符 如 表 2.3 


所 示 。 
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表 2.3 JavaScript 中 的 算术 运算 符 


运 算 符 描述 示例 
党 加 运算 符 4+6 ”// 返 回 值 为 10 
- 减 运 算 符 7-2 ”// 返 回 值 为 5 
by 乘 运算 符 7*3 ”// 返 回 值 为 21 
/ 除 运算 符 12/3 /返回 值 为 4 
% 求 模 运 算 符 7%4 ”// 返 回 值 为 3 


自 增 运算 符 。 该 运算 符 有 两 种 情况 :i++ 在 使 用 i 之后， 使 
i 的 值 加 1) ; ++i 在 使 用 i 之 前 ， 先 使 i 的 值 加 1) 

自 减 运算 符 。 该 运算 符 有 两 种 情况 : i-- 在 使 用 i 之 后 , 使 i 
的 值 减 1) ; --i (在 使 用 i 之 前 ， 先 使 i 的 值 减 1) 


i=1:j=it+ 食 的 值 为 1 i 的 值 为 2 
和 1:j=++ti 食 的 值 为 2，i 的 值 为 2 
i=6; j=i-- /的 值 为 6，i 的 值 为 5 
i=6; j=--i ” 作 的 值 为 5，i 的 值 为 5 


【 例 2.05】 美国 使 用 华氏 度 来 作为 计量 温度 的 单位 ,将 华氏 度 转换 为 摄氏 度 的 公式 为 “摄氏 度 = 
5 719x( 华 氏 度 -32)”。 假设 洛杉矶 市 的 当前 气温 为 68 华氏 度 ， 分 别 输出 该 城市 以 华氏 度 和 摄氏 度 表示 的 
气温 。 关 键 代码 如 下 :( 实例 位 置 : 资源 包 \ 源 码 \02\2.05 ) 


01 <scripttype="text/javascript"> 


02 var degreeF=68; // 定 义 表示 华氏 度 的 变量 
03 var degreeC=0; /初始 化 表示 摄氏 度 的 变量 
04 degreeC=5/9*(degreeF-32); // 将 华氏 度 转换 为 摄氏 度 
05 ”document.write(" 华 氏 度 : "+degreeF+"&deg;F"); // 输 出 华氏 度 表示 的 气温 
06 ”document.write("<br> 摄 氏 度 : "+degreeC+"&deg;C"); // 输 出 摄氏 度 表 示 的 气温 
07 </script> 


本 实例 运行 结果 如 图 2.7 所 示 。 


Je 


| 司 evcodevstozwsvne P ~ © | CB 为 


文件 (有 ”多 强 (E) 。 豆 看 (V) 。 次 硬 交 (A) 工具 (T) 帮 双 (H) 


2.7 输出 以 华氏 度 和 摄氏 度 表示 的 气温 


意 
在 使 用 “/” 运 算 符 进行 除法 运算 时 ， 如 果 被 除数 不 是 0， 除 数 是 0， 得 到 的 结果 为 Infinity; 如 
果 被 除数 和 除数 都 是 0， 得 到 的 结果 为 NaN。 


4 
明 
“+” 除 了 可 以 作为 算术 运算 符 之 外 ， 还 可 用 于 字符 囊 连 接 的 字符 串 运 算 符 。 
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2.3.2 ”字符 串 运 算 符 


字符 串 运 算 符 是 用 于 两 个 字符 串 型 数据 之 间 的 运算 符 ， 它 的 作用 是 将 两 个 字符 串 连 接 起 来 。 在 
JavaScript 中 ， 可 以 使 用 “+” 和 “+=” 运 算 符 对 两 个 字符 串 进行 连接 运算 。 其 中 ,“+” 运 算 符 用 于 
连接 两 个 字符 串 ， 而 “+=” 运 算 符 则 连接 两 个 字符 串 并 将 结果 赋 给 第 一 个 字符 串 。 表 2.4 给 出 了 
JavaScript 中 的 字符 串 运算 符 。 


表 2.4 JavaScript 中 的 字符 串 运 算 符 
描述 


运 算 符 
+ | 连接 两 个 字符 串 


连接 两 个 字符 串 并 将 结果 赋 给 第 一 个 字符 串 


" 零 基础 学 "+"JavaScript" 
var name = " 零 基础 学 " 
name += "JavaScript"// 相 当 于 name = name+"JavaScript" 


【 例 2.06】 将 电影 《美人 鱼 》 的 影片 名 称 、 导 演 、 类 型 、 主 演 和 票房 分 别 定义 在 变量 中 ， 应 用 
字符 串 运算 符 对 多 个 变量 和 字符 串 进行 连接 并 输出 。 代 码 如 下 :( 实例 位 置 : 资源 包 \ 源 码 \02\2.06 ) 


01 <scripttype="text/javascript"> 


02 varmovieName, director,type,actor,boxOffice; /| 声明 变量 

03 ”movieName = "美人 鱼 "; // 定 义 影片 名 称 

04 ”director = "周星驰 "; /定义 影片 导演 

05 ”type = "喜剧 、 爱 情 、 科 幻 "; /定义 影片 类 型 

06 ”actor = "邓超 、 林 人 允 "; // 定 义 影片 主演 

07 boxOffice = 33.9; /定义 影片 票房 

08 alert(" 影 片 名 称 : "+movieName+"n 导演 : "+director+"n 类 型 : "+type+"m 主演 : "+actor+"\n 票房 : 
"+boxOffice+" 亿 元 "); /连接 字符 串 并 输出 

09 </script> 


运行 代码 ， 结 果 如 图 2.8 所 示 。 


2.8 ”对 多 个 字符 串 进行 连接 


/. 
C5% 明 
JavaScript 脚本 会 根据 操作 数 的 数据 类 型 来 确定 表达 式 中 的 “+” 是 算术 运算 符 还 是 字符 串 运算 
符 。 在 两 个 操作 数 中 只 要 有 一 个 是 字符 囊 类 型 ， 那 么 这 个 “1” 就 是 字符 囊 运算 符 ， 而 不 是 算术 运 
算 符 。 
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2.3.3 比较 运算 符 


比较 运算 符 的 基本 操作 过 程 是 , 首先 对 操作 数 进行 比较 (这 个 操作 数 可 以 是 数字 也 可 以 是 字符 串 )， 
然后 返回 一 个 布尔 值 tue 或 false。 在 JavaScript 中 常用 的 比较 运算 符 如 表 2.5 所 示 。 


表 2.5 JavaScript 中 的 比较 运算 符 


运 算 符 描 述 示例 
小 于 1<6 // 返 回 值 为 true 
> 大 于 7>10 /返回 值 为 lse 
SS 小 于 或 等 于 10<=10 /返回 值 为 tme 
> 大 于 或 等 于 3>=6 _// 返 回 值 为 false 


三 等 于 。 只 根据 表面 值 进行 判断 ， 不 涉及 数据 类 型 
一 绝对 等 于 。 根 据 表面 值 和 数据 类 型 同时 进行 判断 
上 = 不 等 于 。 只 根据 表面 值 进行 判断 ， 不 涉及 数据 类 型 
= 不 绝对 等 于 。 根 据 表面 值 和 数据 类 型 同时 进行 判断 


【 例 2.07】 应 用 比较 运算 符 实现 两 个 数值 之 间 的 大 小 比较 。 代 码 如 下 : ( 实例 位 置 : 资源 包 \ 源 
码 \02\2.07 ) 


"17" 一 17 /返回 值 为 tme 
"17" 一 17 /返回 值 为 flse 
"17"!=17 /返回 值 为 false 
"17"! 一 17 // 返 回 值 为 tme 


01 <scripttype="text/javascript"> 


02 varage = 25; /定义 变量 

03 ”document.write("age 变量 的 值 为 : "+age); // 输 出 字符 串 和 变量 的 值 
04 document.write("<p>"); /| 输 出 换行 标记 
05 document.write("age>20: "); /| 输出 字符 串 
06 document.write(age>20); /| 输出 比较 结果 
07 document.write("<br>"); /| 输出 换行 标记 
08 document.write("age<20: "); /| 输出 字符 串 
09 document.write(age<20); /| 输出 比较 结果 
10 document.write("<br>"); /| 输出 换行 标记 
11 document.write("age==20: "); /| 输出 字符 串 
12 document.write(age==20); /| 输出 比较 结果 
13 </script> 


运行 本 实例 ， 结 果 如 图 2.9 所 示 。 


文件 (有 ”篇 强 (E) 至 看 MV) 


图 2.9 输出 比较 结果 


比较 运算 符 也 可 用 于 两 个 字符 串 之 间 的 比较 ， 返 回 结果 同样 是 一 个 布尔 值 tue 或 false。 当 比较 两 
个 字符 串 A 和 B 时 ，JavaScript 会 首先 比较 A 和 了 B 中 的 第 一 个 字符 ， 例 如 第 一 个 字符 的 ASCII 码 值 分 
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别 是 a 和 b,， 如 果 a 大 于 b， 则 字符 串 A 大 于 字符 串 B， 否 则 字符 串 A 小 于 字符 串 B。 如 果 第 一 个 字符 
的 ASCII 码 值 相等 ， 就 比较 A 和 B 中 的 下 一 个 字符 ， 依 此 类 推 。 如 果 每 个 字符 的 ASCII 码 值 都 相等 ， 


那么 字符 数 多 的 字符 串 大 于 字符 数 少 的 字符 串 。 


例如 ， 在 下 面 字符 串 的 比较 中 ， 结 果 都 是 true。 


01 document.write("abc"=="abc"); 
02 document.write("ac"<"bce"); 
03 document.write("abcd">"abc"); 


2.3.4 赋值 运算 符 


/输出 比较 结果 
// 输 出 比较 结果 
/输出 比较 结果 


JavaScript 中 的 赋值 运算 可 以 分 为 简单 赋值 运算 和 复合 赋值 运算 。 简 单 赋值 运算 是 将 赋值 运算 符 
(=) 右边 表达 式 的 值 保 存 到 左边 的 变量 中 ; 而 复合 赋值 运算 混合 了 其 他 操作 (例如 算术 运算 操作 ) 和 


赋值 操作 。 例 如 : 


Sum+=i' 


JavaScript 中 的 赋值 运算 符 如 表 2.6 所 示 。 


/等 同 于 “sum=sum+i” 


表 2.6 JavaScript 中 的 赋值 运算 符 


将 运算 符 左边 的 变量 除 以 右边 表达 式 的 值 赋 给 左边 的 变量 
将 运算 符 左边 的 变量 用 右边 表达 式 的 值 求 模 ， 并 将 结果 赋 给 左边 的 变量 


应 用 赋值 运算 符 实现 两 个 数值 之 问 的 运算 并 输出 结果 。 代 码 如 下 :〈 实例 位 置 : 资源 


将 运算 符 左边 的 变量 乘 以 右边 表达 式 的 值 赋 给 左边 的 变量 


【 例 2.08】 
包 \ 源 码 \02\2.08 ) 


01 
02 
03 
04 
05 
06 
07 


<script type="text/javascript"> 
vara=2; 

var b= 3; 
document.write("a=2,b=3"); 
document.write("<p>"); 
document.write("a+=b 运算 后 :"); 
a+=b; 

document.write("a="+a); 
document.write("<br>"); 
document.write("a-=b 运算 后 :"); 
a-=b; 

document.write("a="+a); 
document.write("<br>"); 
document.write("a*=b 运算 后 : "); 
a*=b; 


示例 
UserName="mr" 
a+=b _// 相 当 于 a=a+b 
a-=b_// 相 当 于 a=a-b 
a*=b_// 相 当 于 a=a*b 
a/=b_// 相 当 于 a=a/b 
a%=b _// 相 当 于 a=a%b 


// 定 义 变量 

/定义 变量 

/输出 a 和 b 的 值 

// 输 出 段落 标记 

/输出 字符 串 

/执行 运算 
/输出 此 时 变量 a 的 值 
/输出 换行 标记 

/输出 字符 串 

/执行 运算 

/输出 此 时 变量 a 的 值 
/输出 换行 标记 

/输出 字符 串 

/| 执行 运算 
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16 document.write("a="+a); // 输 出 此 时 变量 a 的 值 
17 document.write("<br>"); /| 输出 换行 标记 

18 ”document.write("a/=b 运算 后 : "); /输出 字符 串 

19 al=b; /执行 运算 

20 ”document.write("a="+a); /输出 此 时 变量 a 的 值 
21 document.write("<br>"); // 输 出 换行 标记 

22 ”document.write("a%=b 运算 后 : "); /输出 字符 串 

23 a%=b; // 执 行 运算 

24 document.write("a="+a); // 输 出 此 时 变量 a 的 值 
25 </script> 


运行 本 实例 ， 结 果 如 图 2.10 所 示 。 


] ENCodestW0zW8Vnc ~ 0 | 全 生生 起 的 全 
六 强 (E】 查看 (V) 软 过 实 (A) 工具 (帮助 (H) 


图 2.10 输出 赋值 运算 结果 
2.3.5 ”逻辑 运算 符 
逻辑 运算 符 用 于 对 一 个 或 多 个 布尔 值 进 行 逻辑 运算 。 在 JavaScript 中 有 3 个 逻辑 运算 符 ， 如 表 2.7 
所 示 。 
表 2.7 逻辑 运算 符 


a&&b // 当 a 和 bb 都 为 真 时 ， 结 果 为 真 ， 否 则 为 假 


allb_// 当 a 为 真 或 者 b 为 真 时 ， 结 果 为 真 ， 否 则 为 假 
!a _// 当 a 为 假 时 ， 结 果 为 真 ， 否 则 为 假 


【 例 2.09】 应 用 妇 辑 运算 符 对 逻辑 表达 式 进行 运算 并 输出 结果 。 代 码 如 下 :( 实例 位 置 : 资源 包 \ 
源码 \02\2.09 ) 


01 <scripttype="text/javascript"> 


02 varnum = 20; /定义 变量 

03 document.write("num="+num); /| 输 出 变量 的 值 
04 ”document.write("<p>num>0 && num<10 的 结果 : "); // 输 出 字符 串 
05 document.write(num>0 && num<10); // 输 出 运算 结果 
06 ”document.write("<br>num>0 || num<10 的 结果 :"); /| 输 出 字符 串 
07 document.write(num>0 || num<10); // 输 出 运算 结果 
08 ”document.write("<br>Inum<10 的 结果 :"); // 输 出 字符 串 
09 document.write(Inum<10); /| 输出 运算 结果 
10 </script> 
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本 实例 运行 结果 如 图 2.11 所 示 。 


2.11 输出 逻辑 运算 结果 


2.3.6 ”条件 运算 符 


条 件 运算 符 是 JavaScript 支持 的 一 种 特殊 的 三 目 运 算 符 。 

语法 如 下 : 

表达 式 ? 结 果 1: 结 果 2 

如 果 “ 表 达 式 ”的 值 为 tue， 则 整个 表达 式 的 结果 为 “结果 1”， 否 则 为 “结果 2”。 

例如 ， 定 义 两 个 变量 ， 值 都 为 10， 然 后 判断 两 个 变量 是 否 相等 ， 如 果 相等 则 输出 “相等 ”， 否 则 输 
出 “不 相等 ”， 代 码 如 下 : 


01 vara=10; /定义 变量 
02 varb=10; /定义 变量 
03 ”alert(a==b?" 相 等 "" 不 相等 "); // 应 用 条 件 运 算 符 进行 判断 并 输出 结果 


运行 结果 如 图 2.12 所 示 。 

【 例 2.10】 如 果 某 年 的 年 份 值 是 4 的 倍数 并 且 不 是 100 的 倍数 , 或 者 该 年 份 值 是 400 的 倍数 ， 
那么 这 一 年 就 是 闽 年 。 应 用 条 件 运算 符 判 断 2017 年 是 否 是 闽 年 。 代 码 如 下 :( 实例 位 置 : 资源 包 \ 源 
码 \02\2.10 ) 

01 <scripttype="text/javascript"> 

02 varyear = 2017; /定义 年 份 变量 

03 /应 用 条 件 运算 符 进行 判断 

04 result = (year%4 == 0 && year%100 != 0) || (year%400 == 0)?" 是 头 年 "" 不 是 头 年 " 
05 alert(year+" 年 "+result); /| 输 出 判断 结果 

06 </script> 


本 实例 运行 结果 如 图 2.13 所 示 。 


Py 2017 年 不 是 同年 


2.12 ”判断 两 个 变量 是 否 相等 图 2.13 判断 2017 年 是 否 是 半年 
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2.3.7 ”其 他 运算 符 


1. 逗号 运算 符 
逗号 运算 符 用 于 将 多 个 表达 式 排 在 一 起 ， 整 个 表达 式 的 值 为 最 后 一 个 表达 式 的 值 。 例 如 : 
01 vara,b,c,d; /| 声明 变量 
02 a=(b=3,c=5,d=6); // 使 用 逗号 运算 符 为 变量 a 赋值 
03 ”alert("a 的 值 为 "+a); // 输 出 变量 a 的 值 
执行 上 面 的 代码 ， 运 行 结果 如 图 2.14 所 示 。 
2. typeof 运算 符 外 :zs 
typeof 运算 符 用 于 判断 操作 数 的 数据 类 型 。 它 可 以 返回 一 个 字符 串 ， 
该 字符 串 说 明了 操作 数 是 什么 数据 类 型 。 这 对 于 判断 一 个 变量 是 否 已 被 
定义 特别 有 用 。 _ 
语法 如 下 : 图 2.14 输出 变量 a 的 值 
typeof 操作 数 


不 同类 型 的 操作 数 使 用 typeof 运算 符 的 返回 值 如 表 2.8 所 示 。 
表 2.8 不 同类 型 数据 使 用 typeof 运算 符 的 返回 值 


undefined 
例如 ， 应 用 typeof 运算 符 分 别 判断 4 个 变量 的 数据 类 型 ， 代 码 如 下 : 


01 vara,b,c,d; /声明 变量 

02 a=3; // 为 变量 赋值 

03 b="name"; /为 变量 赋值 

04 c=true; // 为 变量 赋值 

05 d=null; /为 变量 赋值 

06 alert('a 的 类 型 为 "+(typeof ai+ "mb 的 类 型 为 "+(typeof bj+ nc 的 类 型 为 "+(typeof c)+ "nd 的 类 型 为 "+(typeof d)); 


// 输 出 变量 的 类 型 
执行 上 面 的 代码 ， 运 行 结果 如 图 2.15 所 示 。 | 
3. new 运算 符 


在 JavaScript 中 有 很 多 内 置 对 象 ， 如 字符 串 对 象 、 日 期 对 象 
和 数值 对 象 等 , 通过 new 运算 符 可 以 用 来 创建 一 个 新 的 内 置 对 象 
实例 。 


图 2.15 输出 不 同 的 数据 类 型 
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语法 如 下 : 


对 象 实例 名 称 = new 对 象 类 型 (参数 ) 
对 象 实例 名 称 = new 对 象 类 型 


当 创建 对 象 实例 时 ， 如 果 没 有 用 到 参数 ， 则 可 以 省 略 圆 括号 ， 这 种 省 略 方式 只 限于 new 运算 符 。 
例如 ， 应 用 new 运算 符 来 创建 新 的 对 象 实例 ， 代 码 如 下 : 


01 Object1 = new Object' /创建 自 定义 对 象 
02 Array2= new Array(); /创建 数组 对 象 
03 Date3=new Date("August 8 2008"); /创建 日 期 对 象 


2.3.8 运算 符 优 先 级 


JavaScript 运算 符 都 有 明确 的 优先 级 与 结合 性 。 优 先 级 较 高 的 运算 符 将 先 于 优先 级 较 低 的 运算 符 进 
行 运算 。 结 合 性 则 是 指 具 有 同等 优先 级 的 运算 符 将 按照 怎样 的 顺序 进行 运算 。JavaScript 运算 符 的 优先 
级 顺序 及 其 结合 性 如 表 2.9 所 示 。 
表 2.9 JavaScript 运算 符 的 优先 级 与 结合 性 
运 算 符 


Gs 
剂 
站 
落 
[3 


中 
可 | 可 | 可 | 可 | 避 | 可 | 避 | 避 | 可 | 避 | 可 | 避 | 避 | 可 可 
这 | 剖 | 半 [IIRt |Rt |Rt |R+t [B+ [Rt | Rt B+ |Rt Rt 
- + 


最 高 ~[]0O 


++、--、-、!、delete、new、typeof、void 


*、 /~、% 


<、<=、>、> 一 、imn、instanceof 


二 、(=、 二 =、! 一 = 


由 高 到 低 依次 排列 


#*=、/==、%=、+=、 一 、<<=、>>=、>>>=、&=、 候 、 上 上 


最 低 
例如 ， 下 面 的 代码 显示 了 运算 符 优先 顺序 的 作用 。 


01 vara; /声明 变量 
02 a=20-(5+6)<10&8&2>1; // 为 变量 赋值 
03 alert(a); /| 输 出 变量 的 值 
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运行 结果 如 图 2.16 所 示 。 

当 在 表达 式 中 连续 出 现 的 几 个 运算 符 优先 级 相同 时 ， 其 运算 的 优先 顺序 由 其 结合 性 决定 。 结 合 
有 向 左 结合 和 向 右 结合 ， 例 如 ， 由 于 运算 符 “+” 是 左 结合 的 ， 所 以 在 计算 表达 式 “a+b+c” 的 值 时 ， 
会 先 计算 “atb”， 即 “(atb)+tc” 而 赋值 运算 符 “=” 是 右 结合 的 ， 所 以 在 计算 表达 式 “a=b=1” 的 值 
时 ， 会 先 计 算 “b=1”。 下 面 的 代码 说 明了 “=” 的 右 结合 


01 vara=1; // 声 明 变 量 并 赋值 
02 b=a=10; // 对 变量 b 赋值 
03 alert("b="+b); // 输 出 变量 b 的 值 


运行 结果 如 图 2.17 所 示 。 

【 例 2.11】 ”假设 手机 原来 的 话费 余额 是 10 元 ， 通 话 资费 为 0.2 元 /分 钟 ， 流 量 资 费 为 0.5 元 / 兆 ， 
在 使 用 了 10 兆 流量 后 ， 计 算 手 机 话费 余额 还 可 以 进行 多 长 时 间 的 通话 。 代 码 如 下 :( 实例 位 置 : 资源 
包 \ 源 码 \02\2.11 ) 


01 <scripttype="text/javascript"> 


02 varbalance = 10; /定义 手机 话费 余额 变量 
03 var call = 0.2; /定义 通话 资费 变量 

04 vartraffic = 0.5; /定义 流量 资费 变量 

05 varminutes = (balance-traffic*10)/call; // 计 算 余额 可 通话 分 钟 数 
06 ”document.write(" 手 机 话费 余额 还 可 以 通话 "+minutes+" 分 钟 "); // 输 出 字符 串 

07 </script> 


剖 看 V) 


[【¢ 问 卓 ENCode\stNzllNine 吕 -|| 必 运 曝 和 优先 奴 的 售 用 
文人 大 突 (A) 
-二 -不 7 


图 2.16 输出 结果 图 2.17 输出 结果 图 2.18 输出 手机 话费 余额 可 以 进行 通话 的 分 钟 数 


表达 式 是 运算 符 和 操作 数组 合 而 成 的 式 子 ， 表 达 式 的 值 就 是 对 操作 数 进行 运算 后 的 结果 。 
由 于 表达 式 是 以 运算 为 基础 的 ， 因 此 表达 式 按 其 运算 结果 可 以 分 为 如 下 3 种 。 

回 ”算术 表达 式 : 运算 结果 为 数字 的 表达 式 称 为 算术 表达 式 。 

回 ”字符 串 表 达 式 : 运算 结果 为 字符 串 的 表达 式 称 为 字符 串 表 达 式 。 

加 ”逻辑 表达 式 : 运算 结果 为 布尔 值 的 表达 式 称 为 逻辑 表达 式 。 
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AS 人 
表达 式 是 一 个 相对 的 概念 ， 在 表达 式 中 可 以 含有 若干 个 子 表达 式 ， 而 且 表达 式 中 的 一 个 常量 或 
变量 都 可 以 看 作 是 一 个 表达 式 。 


2.5 数据 类 型 的 转换 规则 


在 对 表达 式 进 行 求 值 时 ， 通 常 需要 所 有 的 操作 数 都 属于 某 种 特定 的 数据 类 型 ， 例 如 ， 进 行 算术 运 
算 要 求 操作 数 都 是 数值 类 型 ， 进 行 字符 串 连接 运算 要 求 操作 数 都 是 字符 串 类 型 ， 而 进行 逻辑 运算 则 要 
求 操作 数 都 是 布尔 类 型 。 

然而 ，JavaScript 语言 并 没有 对 此 进行 限制 ， 而 且 人 允许 运算 符 对 不 匹配 的 操作 数 进 行 计算 。 在 代码 
执行 过 程 中 ，JavaScript 会 根据 需要 进行 自动 类 型 转换 ， 但 是 在 转换 时 也 要 遵循 一 定 的 规则 。 下 面 介绍 
几 种 数据 类 型 之 间 的 转换 规则 。 

回 ”其 他 数据 类 型 转换 为 数值 型 数据 ， 如 表 2.10 所 示 。 

表 2.10 ”转换 为 数值 型 数据 


类 型 转换 后 的 结果 

undefined NaN 

null 0 

逻辑 型 若 其 值 为 tue， 则 结果 为 1; 若 其 值 为 false， 则 结果 为 0 
字符 串 型 若 内 容 为 数字 ， 则 结果 为 相应 的 数字 ， 否 则 为 NaN 

其 他 对 象 NaN 


加 ”其 他 数据 类 型 转换 为 逻辑 型 数据 ， 如 表 2.11 所 示 。 
表 2.11 转换 为 逻辑 型 数据 


类 型 转换 后 的 结果 

undefined false 

null false 

数值 型 若 其 值 为 0 或 NaN， 则 结果 为 flse， 和 否则 为 tmue 
字符 串 型 若 其 长 度 为 0， 则 结果 为 false， 和 否则 为 rue 

其 他 对 象 tme 


回 ”其 他 数据 类 型 转换 为 字符 串 型 数据 ， 如 表 2.12 所 示 。 
表 2.12 ”转换 为 字符 串 型 数据 


类 型 转换 后 的 结果 

undefined "undefined" 

null "null” 

数值 型 NaN、0 或 者 与 数值 相对 应 的 字符 串 

逻辑 型 若 其 值 tue， 则 结果 为 "tue";， 若 其 值 为 false， 则 结果 为 "false” 

其 他 对 象 车 存在 ， 则 为 其 结果 为 toString0 方 法 的 值 ， 否 则 其 结果 为 "undefined" 
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例如 , 根据 不 同 数据 类 型 之 间 的 转换 规则 输出 以 下 表达 式 的 结果 : 100+"200"、100-"200"、 true+100、 
true+"100"、tme+false 和 "a"-100。 代 码 如 下 : 


01 document.write(100+"200"); // 输 出 表达 式 的 结果 
02 document.write("<br>"); /| 输出 换行 标记 
03 document.write(100-"200"); // 输 出 表达 式 的 结果 
04 document.write("<br>"); /| 输出 换行 标记 
05 document.write(true+100); /| 输出 表达 式 的 结果 
06 document.write("<br>"); /| 输出 换行 标记 
07 document.write(true+"100"); // 输 出 表达 式 的 结果 
08 document.write("<br>"); // 输 出 换行 标记 
09 document.write(true+false); // 输 出 表达 式 的 结果 
10 document.write("<br>"); // 输 出 换行 标记 
11 document.write("a"-100); // 输 出 表达 式 的 结果 
运行 结果 为 : 
100200 
-100 
101 
true100 
1 
NaN 

26 买 战 


2.6.1 输出 存款 单 中 的 信息 


将 存款 人 姓名 、 存 款 账号 、 存 款 金 额定 义 在 变量 中 ， 并 输出 存款 单 中 的 信息 ， 运 行 结果 如 图 2.19 
所 示 。( 实例 位 置 : 资源 包 \ 源 码 \02\ 实 战 \01) 


人 EMCodsTozW7Vn D » © | pe 


EC 


图 2.19 输出 存款 单 中 的 信息 


第 2 章 JavaScript 语言 基础 


2.6.2 判断 12 岁 儿童 是 否 可 以 免票 入 园 


某 公 园 规 定 ， 凡 是 年 龄 在 10 岁 以 下 的 儿童 或 者 60 岁 以 上 的 老年 人 都 可 以 免票 入 园 ， 判 断 一 个 12 
岁 的 儿童 是 否 可 以 免票 入 园 ， 运 行 结 果 如 图 2.20 所 示 。( 实例 位 置 : 资源 包 \ 源 码 \02\ 实 战 \02 ) 


图 2.20 输出 一 个 12 岁 的 儿童 是 否 可 以 免票 入 园 
2.6.3 判断 周 星 星 是 否 成 年 


凡是 年 满 18 周岁 的 公民 就 是 成 年 人 。 周 星星 今年 16 周岁 ， 使 用 条 件 运 算 符 判断 周 星 星 是 否 成 年 ， 
运行 结果 如 图 2.21 所 示 。( 实例 位 置 : 资源 包 \ 源 码 \02\ 实 战 \03 ) 


CB eco p+ o 


文件 (站 ”并 强 (E) 可 看 V】 效 页 闪 (A) 工具 [T) 几 埃 (H) 


2.21 输出 周 星 星 的 年 龄 以 及 是 否 是 成 年 人 
.7， 小 结 


本 章 主要 讲解 了 JavaScript 中 的 语言 基础 ， 包 括 数据 类 型 、 常 量 、 变 量 以 及 运算 符 和 表达 式 等 相关 
内 容 ， 这 些 内 容 是 使 用 JavaScript 进行 编程 的 基础 ， 希 望 读者 可 以 熟练 掌握 这 些 内 容 ， 只 有 掌握 扎实 的 
基础 ， 才 可 以 学 好 后 面 的 知识 。 


< 
第 章 
JavaScript 基本 语句 
( 盒 ; 视频 讲解 : 小 时 53 分 钟 ) 


JavaScript 中 有 很 多 种 语句 ， 通 过 这 些 语 名 可 以 控制 程序 代码 的 执行 顺序 ， 从 
而 完成 比较 复杂 的 程序 操作 。JavaScript 基本 语句 主要 包括 条 件 判 新 语句 、 循 环 语 
句 、 跳 转 语 句 和 异常 处 理 语 句 等 。 本 章 将 对 JavaScript 中 的 这 几 种 基本 语句 进行 详 
细 讲 解 。 

通过 学 习 本 章 ， 读 者 主要 党 可 以 下 内 容 : 

MH ” ”JavaScript 中 的 条 件 判断 语句 

WI JavaScript 中 的 循环 语句 

”在 循环 语句 中 使 用 跳 转 语句 

站， JavaScript 中 的 异常 处 理 语句 
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3.1 条 件 判 断 语句 


在 日 常生 活 中 ， 人 们 可 能 会 根据 不 同 的 条 件 做 出 不 同 的 选择 。 例 如 ， 根 据 路 标 选择 走 


据 第 二 天 的 天 气 情况 选择 做 什么 事情 。 在 编写 程序 的 过 程 中 也 经 常会 遇 到 这 样 的 情况 ， 这 时 就 需要 使 


不 同 的 语句 。 条 件 判 断 语句 主要 包括 两 类 : 一 类 是 站 语句 ， 
的 条 件 判断 语句 进行 详细 的 讲解 。 


3.1.1 j 半 语句 


用 条 件 判 断 语 句 。 所 谓 条 件 判断 语句 就 是 对 语句 中 不 同 条 件 的 值 进行 判断 ， 进 而 根据 不 同 的 条 件 执行 


另 一 类 是 switch 语句 。 下 面 对 这 两 种 类 型 


让 语句 是 最 基本 、 最 常用 的 条 件 判 断 语 句 ， 通 过 判断 条 件 表达 式 的 值 来 确定 是 否 执 行 一 段 语句 ， 


或 者 选择 执行 哪 部 分 语句 。 


true false 


1. 简单 if 语句 
在 实际 应 用 中 ， 站 语句 有 多 种 表现 形式 。 简 单 ff 语句 的 语法 格式 如 下 : 
if 表 达 式 X 
语句 
} 
参数 说 明 。 
加 ”表达 式 : 必 选 项 ， 用 于 指定 条 件 表达 式 ， 可 以 使 
用 逻辑 运算 符 。 


回 语句: 用 于 指定 要 执行 的 语句 序列 ， 可 以 是 一 条 
或 多 条 语句 。 当 表达 式 的 值 为 tue 时 ， 执 行 该 语 
句 序列 。 
简单 站 语句 的 执行 流程 如 图 3.1 所 示 。 
在 简单 让 语句 中 ， 首 先 对 表达 式 的 值 进行 判断 ， 如 果 
它 的 值 是 tue， 则 执行 相应 的 语句 ， 否 则 就 不 执行 。 
例如 ， 根 据 比 较 两 个 变量 的 值 ， 判 断 是 否 输出 比较 结 
果 。 代 码 如 下 : 
01 vara=200; 
02 varb=100; 
03 if(la>b}{ 
04 document.write("a 大 于 b"); 
05 } 
06 if(la<bX{ 
07 document.write("a 小 于 b"); 


图 3.1 简单 让 语句 的 执行 流程 


/定义 变量 a， 值 为 200 

/定义 变量 b， 值 为 100 

// 判 断 变量 a 的 值 是 否 大 于 变量 b 的 值 
/输出 a 大 于 b 


// 潮 断 变量 a 的 值 是 否 小 于 变量 b 的 值 
/1/ 输 出 a 小 于 b 
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行 结果 为 : 


a 大 于 b 


/ 
0 说明 
当 要 执行 的 语句 为 单一 语句 时 ， 其 两 边 的 大 括号 可 以 省 略 。 


ie 


例如 ， 下 面 的 这 段 代 码 和 上 面 代码 的 执行 结果 是 一 样 的， 都 可 以 输出 “a 大 于 b”。 


01 var a=200; /定义 变量 a， 值 为 200 
02 varb=100; /定义 变量 b， 值 为 100 
03 if(la>b) /判断 变量 a 的 值 是 否 大 于 变量 b 的 值 
04 document.write("a 大 于 b"); /| 输出 a 大 于 b 
05 if(la<b) /判断 变量 a 的 值 是 否 小 于 变量 b 的 值 
06 document.write("a 小 于 b"); 1/ 输出 a 小 于 b 
【 例 3.01】 将 3 个 数字 10、20、30 分 别 定义 在 变量 中 ， 应 用 简单 站 语句 获取 这 3 个 数 中 的 最 
大 值 。 代 码 如 下 : (实例 位 置 : 资源 包 \ 源 码 \03\3.01 ) 
01 <scripttype="text/javascript"> 
02 vara,b,c,maxValue; /声明 变量 
03 a=10; /为 变量 赋值 
04 b=20; /为 变量 赋值 
05 c=30; /为 变量 赋值 
06 maxValue=a; /假设 a 的 值 最 大 ， 定 义 a 为 最 大 值 
07 if(maxValue<b)}{ 1/ 如果 最 大 值 小 于 b 
08 maxValue=b; /定义 b 为 最 大 值 
09 
10 if(maxValue<cX{ /| 如果 最 大 值 小 于 c 
11 maxValue=c; /定义 c 为 最 大 值 
2 
13 ”alert(a+"、"+b+"、"+c+" 三 个 数 的 最 大 值 为 +maxValue);”// 输 出 结果 
14 </script> 
运行 结果 如 图 3.2 所 示 。 
2. if...else 语句 FY\ 10、20、30 三 个 数 的 最 大 值 为 30 
让 ...else 语句 是 让 语句 的 标准 形式 ， 在 寺 语 句 简单 形式 的 基础 
之 上 增加 一 个 else 从 句 ， 当 表达 式 的 值 是 包 lse 时 则 执行 else 从 句 [me 
中 的 内 容 。 
图 3.2 3 
语法 如 下 ， 图 获取 3 个 数 中 的 最 大 值 
i 表达 式 并 
语句 1 
Jelse{ 
语句 2 
} 
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参数 说 明 。 
回 ”表达 式 : 必 选 项 ， 用 于 指定 条 件 表达 式 ， 可 以 使 用 逻辑 运算 符 。 


回 ”语句 1: 用 于 指定 要 执行 的 语句 序列 。 当 表达 式 的 
值 为 tue 时 ， 执 行 该 语句 序列 。 Y 
回 ”语句 2: 用 于 指定 要 执行 的 语句 序列 。 当 表达 式 的 ue 表达 式 > false 
值 为 false 时 ， 执 行 该 语句 序列 。 | 1 
让..else 语句 的 执行 流程 如 图 3.3 所 示 。 语句 1 语句 2 
在 让 语句 的 标准 形式 中 , 首先 对 表达 式 的 值 进行 判断 ， 
如 果 它 的 值 是 tue, 则 执行 语句 1 中 的 内 容 , 否则 执行 语句 » 
2 中 的 内 容 。 Y 
例如 ， 根 据 比 较 两 个 变量 的 值 ， 输 出 比较 的 结果 。 代 图 3.3 让 .else 语句 的 执行 流程 
码 如 下 : 
01 vara=100; /定义 变量 a， 值 为 100 
02 varb=200; /定义 变量 b， 值 为 200 
03 if(la>b}{ // 判 断 变量 a 的 值 是 否 大 于 变量 b 的 值 
04 document.write("a 大 于 b"); /| 输出 a 大 于 b 
05 Jelse{ 
06 document.write("a 小 于 b"); /| 输 出 a 小 于 b 
O72 


运行 结果 为 : 
a 小 于 b 
a 
CO 涪 轨 
上 述 计 语句 是 典型 的 二 路 分 支 结 构 。 当 语句 1、 语 和 句 2 为 单一 语句 时 ， 其 两 边 的 大 括号 也 可 以 
省 略 。 


例如 ， 上 面 代码 中 的 大 括号 也 可 以 省 略 ， 程 序 的 执行 结果 是 不 变 的 ， 代 码 如 下 : 


01 vara=100; /定义 变量 a， 值 为 100 

02 varb=200; /定义 变量 b， 值 为 200 

03 if(la>b) /判断 变量 a 的 值 是 否 大 于 变量 b 的 值 
04 document.write("a 大 于 b"); /输出 a 大 于 b 

05 else 

06 document.write("a 小 于 b"); /输出 a 小 于 b 


【 例 3.02】 如 果菜 一 年 是 闽 年 ， 那 么 这 一 年 的 2 月 份 就 有 29 天， 否则 这 一 年 的 2 月 份 就 有 28 
天 。 应 用 站 .else 语句 判断 2010 年 2 月 份 的 天 数 。 代 码 如 下 :( 实例 位 置 : 资源 包 \ 源 码 \03\3.02 ) 


01 <scripttype="text/javascript"> 


02 varyear=2010; /定义 变量 
03 var month=0; /定义 变量 
04 if((year%4==0 && year%100!=0)|lyear%400==0X{ // 判 断 指定 年 是 否 为 闽 年 
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05 month=29; /为 变量 赋值 
06 Jelse{ 

07 month=28; /为 变量 赋值 
08 } 

09 alert("2010 年 2 月 份 的 天 数 为 "+month+" 天 "); /| 输出 结果 
10 </script> 


运行 结果 如 图 3.4 所 示 。 
3. if...else if 语 句 


让 语句 是 一 种 使 用 很 灵活 的 语句 , 除了 可 以 使 用 让..else 语句 的 形式 , 还 可 以 使 用 让..else 站 语句 的 形 
式 。 这 种 形式 可 以 进行 更 多 的 条 件 判 断 ， 不 同 的 条 件 对 应 不 同 的 语句 。 让 .else 站 语句 的 语法 格式 如 下 : 
if (表达 式 1X 
语句 1 
jelse if( 表 达 式 2X{ 
语句 2 


1 
else if( 表 达 式 njf 
语句 n 
}else{ 
语句 n+1 
b 


让 ..else 让 语句 的 执行 流程 如 图 3.5 所 示 。 


true false 


表达 式 1 
Y 
true 表达 式 2 {al 
Y 
te 一 false 
Y 
true 表达 式 站 fal 
2010 征 月份 的 天 数 为 2 天 四 有 re 
全 语句 1 语句 2 ee 语句 n 语句 n+1 
0 
Y 
图 3.4 输出 2010 年 2 月 份 的 天 数 图 3.5 让..else 让 语句 的 执行 流程 


【 例 3.03】 将 某 学 校 的 学 生成 绩 转化 为 不 同等 级 ， 划 分 标准 如 下 : 
Q@ “优秀 ”， 大 于 等 于 90 分 。 

@ “良好 ”大 于 等 于 75 分 。 

@“ 及 格 ” 大 于 等 于 60 分 。 

图 “不 及 格 ”， 小 于 60 分 。 


假设 周 星 星 的 考试 成 绩 是 85 分 ， 
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输出 该 成 绩 对 应 的 等 级 。 其 关键 代码 如 下 : ( 实例 位 置 : 资源 包 \ 


源码 \03\3.03 ) 
01 <scripttype="text/javascript"> 
02 vargrade="™; /定义 表示 等 级 的 变量 
03 var score = 85; /定义 表示 分 数 的 变量 score 值 为 85 
04 if(score>=90X{ /如果 分 数 大 于 等 于 90 
05 grade = "优秀 "; // 将 "优秀 "赋值 给 变量 grade 
06 Jelse if(score>=75X{ // 如 果 分 数 大 于 等 于 75 
07 grade = "良好 "; // 将 "良好 "赋值 给 变量 grade 
08 Jelse if(score>=60X{ // 如 果 分 数 大 于 等 于 60 
09 grade = "及 格 "; /将 "及 格 "赋值 给 变量 grade 
10 Jelse{ // 如 果 score 的 值 不 符合 上 述 条 件 
11 grade = "不 及 格 "; // 将 "不 及 格 "赋值 给 变量 grade 
1 
13 ”alert(" 周 星星 的 考试 成 绩 "+grade); // 输 出 考试 成 绩 对 应 的 等 级 
14 </script> 
运行 结果 如 图 3.6 所 示 。 


4. if 语 句 的 嵌 套 
让 语句 不 但 可 以 单独 使 用 ， 而 且 可 以 嵌 套 应 用 ， 即 在 并 语句 的 从 句 部 分 杠 套 另外 一 个 完整 的 站 语 
句 。 基 本 语法 格式 如 下 : 


if (表达 式 1){ 
if( 表 达 式 2X 


语句 1 


jelsef 


语句 2 


}else{ 
if( 表 达 式 3X{ 


} 


例如 ， 某 考 和 
数 必须 在 130 以 上 才 可 以 报考 外 


语句 3 


Jelse{ 


3 


语句 4 


生 Ta 


图 3.6 输出 考试 成 绩 对 应 的 等 级 


E 的 高 考 总 分 是 620， 英 语 成 绩 是 120。 假 设 重点 本 科 的 录取 分 数 线 是 600， 而 英语 分 
国语 大 学 ， 应 用 证 语句 的 嵌 套 判断 该 考生 能 否 报考 外 国语 大 学 ， 代 码 
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如 下 : 
01 var totalscore=620; /定义 总 分 变量 
02 var englishscore=120; /定义 英语 分 数 变量 
03 iftotalscore>600)f // 如 果 总 分 大 于 600 
04 if(englishscore>130X // 如 果 英 语 分 数 大 于 130 
05 alert(" 该 考生 可 以 报考 外 国语 大 学 "); // 输 出 字符 串 
06 }else{ 
07 alert(" 该 考生 可 以 报考 重点 本 科 ， 但 不 能 报考 外 国语 大 学 ")，// 输 出 字符 串 
08 } 
09 Jelse{ 
10 if(totalscore>500X{ // 如 果 总 分 大 于 500 
11 alert(" 该 考生 可 以 报考 普通 本 科 "); // 输 出 字符 串 
12 }else{ 
13 alert(" 该 考生 只 能 报考 专科 "); // 输 出 字符 串 
14 } 
15° 
运行 结果 如 图 3.7 所 示 。 
从 3 ， 人 不 有 妥当 庆生 得 大 
3.7 输出 该 考生 能 否 报考 外 国语 大 学 
/ 
5 涪 明 


在 使 用 谋 套 的 让 语 名 时， 最 好 使 用 大 括号 {} 来 确定 相互 之 间 的 层次 关系 。 否则 ， 由 于 大 括号 {} 
使 用 位 置 的 不 同 ， 可 能 导致 程序 代码 的 含义 完全 不 同 ， 从 而 输出 不 同 的 内 容 。 


例 3.04】 假设 某 工种 的 男 职工 60 岁 退休 ， 女 职工 55 岁 退 休 ， 应 用 站 语句 的 柑 套 来 判断 一 位 


58 岁 的 女 职工 是 否 已 经 退休 。 代 码 如 下 :( 实例 位 置 : 资源 包 \ 源 码 \03\3.04 ) 


01 
02 
03 
04 
05 


<script type="text/javascript"> 


var sex=" 女 "; // 定 义 表示 性 别 的 变量 
var age=58; /定义 表示 年 龄 的 变量 
if(sex==" 男 "X // 如 果 是 男 职工 就 执行 下 面 的 内 容 
if(age>=60X{ // 如 果 男 职工 在 60 岁 以 上 
alert(" 该 男 职工 已 经 退休 "+(age-60)+" 年 "); /输出 字符 串 
jelse{ // 如 果 男 职工 在 60 岁 以 下 
alert(" 该 男 职工 并 未 退休 "); /输出 字符 串 
}else{ // 如 果 是 女 职工 就 执行 下 面 的 内 容 
if(age>=55X{ /1 如 果 女 职工 在 55 岁 以 上 
alert(" 该 女 职 工 已 经 退休 "+(age-55)+" 年 "); // 输 出 字符 串 
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13 Jelse{ /如 果 女 职工 在 55 岁 以 下 
14 alert( "该 女 职工 并 未 退休 "); /输出 字符 串 

15 = 

6 

17 </script> 


运行 结果 如 图 3.8 所 示 。 


F 该 女 职工 已 经 通体 3 年 


图 3.8 输出 该 女 职工 是 否 已 退休 


3.1.2 ”switch 语句 


switch 是 典型 的 多 路 分 支 语句 ， 其 作用 与 下 ..else 站 语句 基本 相同 , 但 switch 语句 比 站 ..else if 语 句 
更 具有 可 读 性 ， 它 根据 一 个 表达 式 的 值 ， 选 择 不 同 的 分 支 执行 。 而 且 switch 语句 允许 在 找 不 到 一 个 匹 
配 条 件 的 情况 下 执行 默认 的 一 组 语句 。switch 语句 的 语法 格式 如 下 : 
switch (表达 式 X{ 
case 常量 表达 式 1: 
语句 1; 
break; 
case 常量 表达 式 2: 
语句 2; 
break; 


case 常量 表达 式 n: 
语句 rm 
break; 

default: 
语句 n+1; 
break; 


} 

参数 说 明 。 

加 ”表达 式 : 任意 的 表达 式 或 变量 。 

回 ”常量 表达 式 : 任意 的 常量 或 常量 表达 式 。 当 表达 式 的 值 与 某 个 常量 表达 式 的 值 相等 时 ， 就 执 
行 此 case 后 相应 的 语句 ， 如 果 表 达 式 的 值 与 所 有 的 常量 表达 式 的 值 都 不 相等 ， 则 执行 default 
后 面相 应 的 语句 。 

回 break: 用 于 结束 switch 语句 ， 从 而 使 JavaScript 只 执行 匹配 的 分 支 。 如 果 没 有 了 break 语句 ， 
则 该 匹配 分 支 之 后 的 所 有 分 支 都 将 被 执行 ，switch 语句 也 就 失去 了 使 用 的 意义 。 
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switch 语句 的 执行 流程 如 图 3.9 所 示 。 


表达 式 
了 
i pt 四 false 下 7 false false ar = false 
常量 表达 式 1 * 一 常量 表达 式 2 CC * 常量 表达 式 n 全 default 
true true true true true 
了 了 Y Y Y 
语句 1 语句 2 | | 语句 n 语句 n+1 
4 
YY 了 ol 


图 3.9 switch 语句 的 执行 流程 


Ye 
605 培 田 
default 语句 可 以 省 略 。 在 表达 式 的 值 不 能 与 任何 一 个 case 语句 中 的 值 相 匹配 的 情况 下 ， 
JavaScript 会 直接 结束 switch 语句 ， 不 进行 任何 操作 。 


意 
case 后 面 常 量 表达 式 的 数据 类 型 必须 与 表达 式 的 数据 类 型 相同 ， 否 则 匹配 会 全 部 失败 ， 而 去 执 
行 default 语句 中 的 内 容 。 


【 例 3.05】 某 公 司 年 会 举行 抽奖 活动 ， 中 奖 号 码 及 其 对 应 的 奖品 设置 如 下 : 

@@ “1” 代 表 “ 一 等 奖 ”， 奖 品 是 “华为 手机 ”。 

加 “2” 代 表 “ 二 等 奖 ”， 奖品 是 “光波 炉 ”。 

@ “3” 代 表 “ 三 等 奖 ” 奖品 是 “电饭煲 "。 

@ 其 他 号 码 代表 “安慰 奖 ” 奖品 是 “16G-U 盘 ”。 

假设 某 员 工 抽 中 的 奖 号 为 3， 和 输出 该 员工 抽 中 的 奖项 级 别 以 及 所 获得 的 奖品 。 代 码 如 下 : ( 实例 位 
置 : 资源 包 \ 源 码 \03\3.05 ) 


01 <scripttype="text/javascript"> 


02 var grade="™"; /定义 表示 奖项 级 别 的 变量 
03 varprize="™; /定义 表示 奖品 的 变量 

04 varcode=3; /定义 表示 中 奖 号 码 的 变量 值 为 3 
05 switch(code)}{ 

06 case 1: // 如 果 中 奖 号 码 为 1 

07 grade=" 一 等 奖 "; /定义 奖项 级 别 

08 prize=" 华 为 手机 "; // 定 义 获得 的 奖品 

09 break:; // 退 出 switch 语句 

10 case 2: // 如 果 中 奖 号 码 为 2 

qh grade=" 二 等 奖 "; /定义 奖项 级 别 

12 prize=" 光 波 炉 "; /定义 获得 的 奖品 

3 break; /退出 switch 语句 

14 case 3: // 如 果 中 奖 号 码 为 3 
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15 grade=" 三 等 奖 "; /定义 奖项 级 别 

16 prize=" 电 饭 煲 "; /定义 获得 的 奖品 

7 break; // 退 出 switch 语句 

18 default: // 如 果 中 奖 号 码 为 其 他 号 码 
19 grade=" 安 慰 奖 "; /定义 奖项 级 别 

20 prize="16G-U 盘 "; /定义 获得 的 奖品 

24 break; // 退 出 switch 语句 

22 } 


23 ”document.write(" 该 员工 获得 了 "+grade+"<br> 奖 品 是 "+prize); 。 // 输 出 奖项 级 别 和 获得 的 奖品 
24 </script> 


运行 结果 如 图 3.10 所 示 。 


司 EAcode\sWoa\ 


3.10 输出 奖项 和 奖品 


/ 
明 

在 程序 开发 的 过 程 中 , 使 用 让 语 句 还 是 使 用 switch 语句 可 以 根据 实际 情况 而 定 , 尽量 做 到 物 尽 

其 用 ， 不 要 因为 switch 语句 的 效率 高 就 一 味 地 使 用 ， 也 不 要 因为 让 语句 常用 就 不 应 用 switch 语句 。 

要 根据 实际 的 情况 ， 具 体 问题 具体 分 析 ， 使 用 最 适合 的 条 件 语句 。 一 般 情况 下 ， 对 于 判断 条 件 较 少 

的 可 以 使 用 过 条 件 语句 ， 但 是 在 实现 一 些 多 条 件 的 判断 中 ， 就 应 该 使 用 switch 语句 。 


3.2 循环 语 约 


在 日 常生 活 中 ， 有 时 需要 反复 地 执行 某 些 操作 。 例 如 ， 运 动员 要 完成 10000 米 的 比赛 ， 需 要 在 跑 
道上 跑 25 圈 , 这 就 是 循环 的 一 个 过 程 。 类 似 这 样 反 复 执行 同一 操作 的 情况 , 在 程序 设计 中 经 常会 遇 到 ， 
为 了 满足 这 样 的 开发 需求 ，JavaScript 提供 了 循环 语句 。 所 谓 循环 语句 就 是 在 满足 条 件 的 情况 下 反复 地 
执行 某 一 个 操作 。 循 环 语句 主要 包括 while 语句 、do...while 语句 和 for 语句 ， 下 面 分 别 进行 讲解 。 


3.2.1 while 语句 


while 循环 语句 也 称 为 前 测试 循环 语句 ， 它 是 利用 一 个 条 件 来 控制 是 否 要 继续 重复 执行 这 个 语句 。 
while 循环 语句 的 语法 格式 如 下 : 
while( 表 达 式 多 
语句 
) 
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参数 说 明 。 
表达 式 : 一 个 包含 比较 运算 符 的 条 件 表达 式 ， 用 来 指定 循环 条 件 。 
回 ”语句 : 用 来 指定 循环 体 ， 在 循环 条 件 的 结果 为 tue 时 ， 重 复 执行 。 


/ 
0 涪 明 
while 循环 语句 之 所 以 命名 为 前 测试 循环 ， 是 因为 它 要 先 判断 此 循环 的 条 件 是 否 成 立 ， 然 后 才 
进行 重复 执行 的 操作 。 也 就 是 说 ，while 循环 语句 执行 的 过 程 是 先 判断 条 件 表达 式 ， 如 果 条 件 表达 
式 的 值 为 tue， 则 执行 循环 体 ， 并 且 在 循环 体 执行 完毕 后 ， 进 入 下 一 次 循环 ， 否 则 退出 循环 。 


while 循环 语句 的 执行 流程 如 图 3.11 所 示 。 


了 
+ 一 循环 条 件 false 
true 
vy 
循环 体 
< 


3.11 while 循环 语句 的 执行 流程 
例如 ， 应 用 while 语句 输出 1~10 这 10 个 数字 的 代码 如 下 : 


01 vari=1; /声明 变量 

02 while(i<=10X /定义 while 语句 
03 document.write(i+"\n"); // 输 出 变量 i 的 值 
04 it+; /变量 i 自 加 1 
05 } 

运行 结果 为 : 


12345678910 


篇 s 注 意 
在 使 用 while 语句 时 ， 一 定 要 保证 循环 可 以 正常 结束 ， 即 必须 保证 条 件 表 达 式 的 值 存在 为 false 
的 情况 ， 否 则 将 形成 死 循 环 。 


【 例 3.06】 运动 员 参 加 5000 米 比 赛 ， 已 知 标准 的 体育 场 跑道 一 轿 是 400 米 ， 应 用 while 语句 计 
算出 在 标准 的 体育 场 跑 道上 完成 比赛 需要 跑 完整 的 多 少 圈 ,。 代 码 如 下 :( 实例 位 置 :资源 包 \ 源 码 \03\3.06 ) 


01 <scripttype="text/javascript"> 


02 var distance=400; // 定 义 表示 距离 的 变量 
03 var count=0; /定义 表示 圈 数 的 变量 
04 while(distance<=5000X{ 

05 Count++; // 圈 数 加 1 
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06 distance=(count+1)*400; // 每 跑 一 圈 就 重新 计算 距离 
Oz 
08 ”document.write("5000 米 比赛 需要 跑 完整 的 "+count+" 圈 "); // 输 出 最 后 的 圈 数 
09 </script> 


运行 本 实例 ， 结 果 如 图 3.12 所 示 。 


关 EACode\st\0a\06Winc ”| 大 护 二 5000 米 比赛 要 要 


工具 (帮助 (H) 


图 3.12 输出 5000 米 比 赛 的 完整 圈 数 
3.2.2 do...while 语句 


do..….while 循环 语句 也 称 为 后 测试 循环 语句 , 它 也 是 利用 一 个 条 件 来 控制 是 否 要 继续 重复 执行 这 个 
语句 。 与 while 循环 所 不 同 的 是 ， 它 先 执行 一 次 循环 语句 ， 然 后 再 去 判断 是 否 继续 执行 。do.…while 循 
环 语句 的 语法 格式 如 下 : 

dof 

语句 

} while( 表 达 式 ); 

参数 说 明 。 

回 ”语句 : 用 来 指定 循环 体 ， 循 环 开始 时 首先 被 执行 一 次 ， 然 后 在 循环 条 件 的 结果 为 true 时 ， 重 

复 执 行 。 

回 ”表达 式 : 一 个 包含 比较 运算 符 的 条 件 表达 式 ， 用 来 指定 循环 条 件 。 

BVT 
| do.…while 循环 语句 执行 的 过 程 是 : 先 执行 一 次 循环 体 ， 然 后 再 判断 条 件 表达 式 ， 如 果 条 件 表 


， 达 式 的 值 为 tue， 则 继续 执行 ， 否 则 退出 循环 。 也 就 是 说 ，do..….while 循环 语句 中 的 循环 体 至 少 被 
执行 一 次 。 


do.…while 循环 语句 的 执行 流程 如 图 3.13 所 示 。 


”循环 体 


L_tzue -循环 条 件 


false 


3.13 ”do...while 循环 语句 的 执行 流程 
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do.….while 循环 语句 同 while 循环 语句 类 似 ， 也 常用 于 循环 执行 的 次 数 不 确定 的 情况 。 


总 
do...wWhile 语句 结尾 处 的 while 语句 括号 后 面 有 一 个 分 号 “:”， 为 了 养 成 良好 的 编程 习惯 ， 建 
议 读者 在 书写 的 过 程 中 不 要 将 其 遗漏 。 


例如 ， 应 用 do...while 语句 输出 1~10 这 10 个 数字 的 代码 如 下 : 


01 vari=1; // 声 明 变 量 

02 dof /定义 do...while 语句 
03 document.write(i+"\n"); // 输 出 变量 i 的 值 

04 i // 变 量 i1 自 加 1 

05 J}while(i<=10); 

运行 结果 为 : 


12345678910 


do...while 语句 和 while 语句 的 执行 流程 很 相似 。 由 于 do...while 语句 在 对 条 件 表达 式 进行 判断 之 前 就 
执行 一 次 循环 体 ， 因 此 do.…while 语句 中 的 循环 体 至 少 被 执行 一 次 ， 下 面 的 代码 说 明了 这 两 种 语句 的 区 别 。 


01 vari=1; // 声 明 变 量 

02 “while(i>1){ /定义 while 语句 ， 指 定 循环 条 件 
03 document.write("i 的 值 是 "+i); // 输 出 i 的 值 

04 i-; /变量 i 自 减 1 

05 } 

06 varj=1; // 声 明 变 量 

07 dof /定义 do...while 语句 
08 document.write("j 的 值 是 "+j); // 输 出 变量 j 的 值 

09 j-; // 变 量 j 自 减 1 

10  }while(>1); 

运行 结果 为 : 

j 的 值 是 1 


【 例 3.07】 使 用 do...while 语句 计算 1+2+…+100 的 和 ， 并 在 页 面 中 输出 计算 后 的 结果 。 代 码 如 
下 :( 实例 位 置 : 资源 包 \ 源 码 \03\3.07 ) 


01 <scripttype="text/javascript"> 


02 vari=1; // 声 明 变量 并 对 变量 初始 化 
03 varsum = 0; // 声 明 变量 并 对 变量 初始 化 
04 dof 

05 sum+=i; // 对 变量 i 的 值 进 行 累加 
06 i++; /变量 i 自 加 1 

07 }while(i<=100); /指定 循环 条 件 

08 ”document.write("1+2+…+100="+sumn); /输出 计算 结果 

09 </script> 


运行 本 实例 ， 结 果 如 图 3.14 所 示 。 
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间 EMCodest3W7ine PD - © 车 计 和 莫 1+2+ +10085 和 和 
文件 由 ”党 雪 (二 看 V) 次 营 夫 (A) 工具 (大切 (H) 


图 3.14 计算 1+2+…+100 的 和 
3.2.3 for 语句 


for 循环 语句 也 称 为 计 次 循环 语句 ， 一 般 用 于 循环 次 数 已 知 的 情况 ,在 JavaScript 中 应 用 比较 广泛 。 
for 循环 语句 的 语法 格式 如 下 : 


for( 初 始 化 表达 式 ;条 件 表达 式 ;迭代 表达 式 X 
语句 


} 


参数 说 明 。 

回 ”初始 化 表达 式 : 初始 化 语句 ， 用 来 对 循环 变量 进行 初始 化 赋值 。 

回 条件 表达 式 : 循环 条 件 ， 一 个 包含 比较 运算 符 的 表达 式 ， 用 来 限定 循环 变量 的 边 限 。 如 果 循 
环 变量 超过 了 该 边 限 ， 则 停止 该 循环 语句 的 执行 。 

回 ”和 迭代 表达 式 : 用 来 改变 循环 变量 的 值 ， 从 而 控制 循环 的 次 数 ， 通 常 是 对 循环 变量 进行 增 大 或 
减 小 的 操作 。 

回 ”语句 : 用 来 指定 循环 体 ， 在 循环 条 件 的 结果 为 re 时 ， 重 复 执行 。 


NAw 


明 
for 循环 语句 执行 的 过 程 是 ， 先 执行 初始 化 语句 ， 然 后 判断 循环 条 件 ， 如 果 循 环 条 件 的 结果 为 
true， 则 执行 一 次 循环 体 ， 否 则 直接 退出 循环 ， 最 后 执行 迭代 语句 ， 改 变 循环 变量 的 值 ， 至 此 完成 
;一 次 循环 ; 接 下 来 将 进行 下 一 次 循环 ， 直 到 循环 条 件 的 结果 为 false， 才 结束 循环 。 


for 循环 语句 的 执行 流程 如 图 3.15 所 示 。 


. 
初始 化 语句 
’ 
*- 宾 环 条 件 


false 


true 
二 


循环 体 
主 
改变 循环 变量 的 值 


+ 
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例如 ， 应 用 for 语句 输出 1~10 这 10 个 数字 的 代码 如 下 : 


01 for(vari=1;i<=10;it+X{ /定义 for 循环 语句 
02 document.write(i+"\n"); // 输 出 变量 i 的 值 
03 } 

运行 结果 为 : 


12345678910 


在 for 循环 语句 的 初始 化 表达 式 中 可 以 定义 多 个 变量 。 例 如 ， 在 for 语句 中 定义 多 个 循环 变量 的 代 


码 如 下 : 


01 
02 
03 
04 


运行 


16 
25 
34 
43 
52 
61 


for(var i=1,j=6;i<=6,j>=1,i++,j—X{ 


document.write(i+"n"+j); /输出 变量 1 和 j 的 值 
document.write("<br>"); // 输 出 换行 标记 

} 

结果 为 : 


寺 b 注 意 
在 使 用 for 语句 时 ， 也 一 定 要 保证 循环 可 以 正常 结束 ， 也 就 是 必须 保证 循环 条 件 的 结果 存在 为 
false 的 情况 ， 否 则 循环 体 将 无 休止 地 执行 下 去 ， 从 而 形成 死 循 环 .例如 ， 下 面 的 循环 语句 就 会 造成 


死 循环 


01 
02 
03 


， 原 因 是 i 永远 大 于 等 于 1。 
for(i=1;i>=1;i++X{ /定义 for 循环 语句 
alert(i); // 输 出 变量 i 的 值 
} 


为 使 读者 更 好 地 了 解 for 语句 的 使 用 ， 下 面 通过 一 个 实例 来 介绍 for 语句 的 使 用 方法 。 
【 例 3.08】 ”应 用 for 循环 语句 计算 100 以 内 所 有 奇数 的 和 ， 并 在 页 面 中 输出 计算 后 的 结果 。 代 


码 如 下 : 


01 
02 
03 
04 
05 
06 
07 
08 


( 实例 位 置 : 光盘 \ 源 码 \03\3.08 ) 


<script type="text/javascript"> 


var i,sum; /声明 变量 
sum = 0; // 对 变量 初始 化 
for(i=1;i<100;i+=2X{ 

sum=sum+i; /| 计算 100 以 内 各 奇数 之 和 
} 
alert("100 以 内 所 有 奇数 的 和 为 : "+sum); // 输 出 计算 结果 
</script> 
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运行 程序 ， 在 对 话 框 中 会 显示 计算 结果 ， 如 图 3.16 所 示 。 


生 :oobmrmssesem:2500 


图 3.16 输出 100 以 内 所 有 奇数 的 和 


3.2.4 ”循环 语句 的 嵌 套 


在 一 个 循环 语句 的 循环 体 中 也 可 以 包含 其 他 的 循环 语句 ， 这 称 为 循环 语句 的 嵌 套 。 上 述 3 种 循环 
语句 〈while 循环 语句 、do.…while 循环 语句 和 for 循环 语句 ) 都 是 可 以 互相 嵌 套 的 。 

如 果 循 环 语句 A 的 循环 体 中 包含 循环 语句 B， 而 循环 语句 B 中 不 包含 其 他 循环 语句 ， 那 么 就 把 循 
环 语句 A 叫 作 外 层 循环 ， 而 把 循环 语句 B 叫 作 内 层 循环 。 

例如 ， 在 while 循环 语句 中 包含 for 循环 语句 的 代码 如 下 : 


01 varij; // 声 明 变 量 

02 i=1; // 对 变量 赋 初 值 

03 while(i<4X{ /定义 外 层 循环 

04 document.write(" 第 "+i+" 次 循环 : "); // 输 出 循环 变量 i 的 值 
05 for(j=1;j<=10;j++X{ /定义 内 层 循环 

06 document.write(j+"\n"); // 输 出 循环 变量 j 的 值 
07 

08 document.write("<br>"); // 输 出 换行 标记 

09 it+; // 对 变量 1 自 加 1 
0 

运行 结果 为 : 


第 1 次 循环 : 12345678910 
第 2 次 循环 : 12345678910 
第 3 次 循环 : 12345678910 


【 例 3.09】 用 柑 套 的 for 循环 语句 笨 出 乘法 口诀 表 。 代码 如 下 : ( 实例 位 置 : 资源 包 \ 源 码 \03\3.09 ) 


01 <scripttype="text/javascript"> 


02 varij; /| 声明 变量 

03 document.write("<pre>"); /| 输出 <pre> 标 记 

04 for(i=1;i<10;i++X{ /定义 外 层 循环 

05 for(J=1:j<=i:j++X{ /定义 内 层 循环 

06 ij>1) document.write(™\t"); // 如 果 j 大 于 1 就 输出 一 个 Tab 空格 
07 document.write(j+"x"+i+"="+j*i); // 输 出 乘法 算式 

08 1 

09 document.write("<br>"); /输出 换行 标记 

0. 站 
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11 document.write("</pre>"); /输出 </pre> 标 记 
12 </script> 
运行 本 实例 ， 结 果 如 图 3.17 所 示 。 


图 3.17 输出 乘法 口诀 表 


33 跳 转 语句 


视频 讲解 


假设 在 一 个 书架 中 寻找 一 本 《新 华 字 典 》， 如 果 在 第 二 排 第 三 个 位 置 找到 了 这 本 书 ， 那 么 就 不 需要 
去 看 第 三 排 、 第 四 排 的 书 了 。 同 样 ， 在 编写 一 个 循环 语句 时 ， 当 循环 还 未 结束 就 已 经 处 理 完了 所 有 的 
任务 ， 就 没有 必要 让 循环 继续 执行 下 去 ， 继 续 执行 下 去 既 浪费 时 间 又 浪费 内 存 资源 。 在 JavaScript 中 提 
供 了 两 种 用 来 控制 循环 的 跳 转 语句 : continue 语句 和 break 语句 。 


3.3.1 continue 语句 


continue 语句 用 于 跳 过 本 次 循环 ， 并 开始 下 一 次 循环 。 其 语法 格式 如 下 : 
continue; 


continue 语句 只 能 应 用 在 while、for、do...while 语句 中 。 
例如 ， 在 for 语句 中 通过 continue 语句 输出 10 以 内 不 包括 5 的 自然 数 的 代码 如 下 : 
01 for(=1:i<=10:i++) 


02 if(i==5) continue; /| 如 果 i 等 于 5 就 跳 过 本 次 循环 
03 document.write(i+"\n"); /| 输出 变量 i 的 值 

04 } 

运行 结果 为 


1234678910 
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1 
NC 说明 
当 使 用 continue 语句 跳 过 本 次 循环 后 ， 如 果 循 环 条 件 的 结果 为 false， 则 退出 循环 ， 否 则 继续 下 
一 次 循环 。 


【 例 3.10】 万 达 影 城 7 号 影 厅 的 观众 席 有 4 排 ， 每 排 有 10 个 座位 。 其 中 ,1 排 6 座 和 3 排 9 座 
已 经 出 售 ， 在 页 面 中 输出 该 影 厅 当 前 的 座位 图 。 关 键 代 码 如 下 :( 实例 位 置 : 资源 包 \ 源 码 \03\3.10 ) 


01 <scripttype="text/javascript"> 


02 document.write("<table align='center>"); /输出 表格 标签 

03 for(vari=1;i<= 4; i++){ /定义 外 层 for 循环 语句 

04 document.write("<tr height=70>"); /输出 表格 行 标签 

05 for(varj = 1;j <= 10; j++X{ /定义 内 层 for 循环 语句 

06 if(i == 1 && j == 6 // 如 果 当 前 是 1 排 6 座 

07 // 将 座位 标记 为 “已 售 ” 

08 document.write("<td align='center width=80 background=yes.png> 已 售 </td>"); 

09 continue; /应 用 continue 语句 跳 过 本 次 循环 
10 } 

11 if(i == 3 &8 j == 9X{ // 如 果 当 前 是 3 排 9 座 

4 // 将 座位 标记 为 “已 售 ” 

13 document.write("<td align='center width=80 background=yes.png> 已 售 </td>"); 

14 continue; /应 用 continue 语句 跳 过 本 次 循环 
15 


4 
16 // 输 出 排 号 和 座位 号 
7 document.write("<td align='center width=80 background=no.png>"+i+" 排 "+j+" 座 "+"</td>"); 


站 Ne El /| 输出 表格 行 结束 标签 
3 ee /| 输出 表格 结束 标签 
22 </script> 
运行 本 实例 ， 结 果 如 图 3.18 所 示 。 

[< JE 二 二 
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图 3.18 输出 影 厅 当前 座位 图 
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3.3.2 ”break 语句 


在 3.1.2 节 的 switch 语句 中 已 经 用 到 了 break 语句 ， 当 程序 执行 到 break 语句 时 就 会 跳出 switch 语 
句 。 除 了 switch 语句 之 外 ， 在 循环 语句 中 也 经 常会 用 到 break 语句 。 
在 循环 语句 中 ，break 语句 用 于 跳出 循环 。break 语句 的 语法 格式 如 下 : 


break; 
AS 名 四 


break 语句 通常 用 在 for、while、do.…while 或 switch 语句 中 。 


例如 ， 在 for 语句 中 通过 break 语句 跳出 循环 的 代码 如 下 : 
01 for(i=1;i<=10;i++X 


02 ii==5) break; // 如 果 i 等 于 5 就 跳出 整个 循环 
03 document.write(i+ "\n"); // 输 出 变量 i 的 值 

049} 

运行 结果 为 : 


1234 


意 
在 谋 套 的 循环 语句 中 ，break 语句 只 能 跳出 当前 这 一 层 的 循环 语句 ， 而 不 是 跳出 所 有 的 循环 语句。 


例如 ， 应 用 break 语句 跳出 当前 循环 的 代码 如 下 : 


01 varij; /| 声明 变量 

02 for(i=1:i<=3:i++) // 定 义 外 层 循环 语句 
03 document.write(i+"\n"); // 输 出 变量 i 的 值 
04 for(=1:j<=3;j++X // 定 义 内 层 循环 语句 
05 if0==2) // 如 果 变量 j 的 值 等 于 2 
06 break; // 跳 出 内 层 循环 

07 document.write(j); // 输 出 变量 j 的 值 
08 } 

09 document.write("<br>"); // 输 出 换行 标记 

x 

运行 结果 为 : 

4 

| 

31 


由 运行 结果 可 以 看 出 ， 外 层 for 循环 语句 一 共 执行 了 3 次 (输出 1、2、3)， 而 内 层 循环 语句 在 每 
次 外 层 循 环 里 只 执行 了 一 次 (只 输出 1)。 


58 
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3.4 异常 处 理 语句 


早期 的 JavaScript 总 会 出 现 一 些 令 人 困惑 的 错误 信息 , 为 了 避免 类 似 这 样 的 问题 , 在 JavaScript 3.0 
中 添加 了 异常 处 理 机 制 ， 可 以 采用 从 Java 语言 中 移植 过 来 的 模型 ， 使 用 try.…catch...finally、throw 等 语 
句 处 理 代 码 中 的 异常 。 下 面 介绍 JavaScript 中 的 几 个 异常 处 理 语句 。 


3.4.1 try...catch...finally 语句 


JavaScript 从 Java 语言 中 引入 了 try.…catch...finally 语句 。 
语法 如 下 : 
try{ 


somestatements; 
}catch(exception)\{ 

somestatements; 
jfinally{ 

somestatements; 


上 

参数 说 明 。 

回 ty: 尝试 执行 代码 的 关键 字 。 

回 “catch: 捕捉 异常 的 关键 字 。 

回 finally: 最 终 一 定 会 被 处 理 的 区 块 的 关键 字 ， 该 关键 字 和 后 面 大 括号 中 的 语句 可 以 省 上 略 。 


VT 


JavaScript 语言 与 Java 语言 不 同 ，try...catch 语句 只 能 有 一 个 catch 语句 。 这 是 由 于 在 JavaScript 
语言 中 无 法 指定 出 现 异常 的 类 型 。 


例如 ， 当 在 程序 中 输入 了 不 正确 的 方法 名 charat 时 ， 将 弹出 在 catch 区 域 中 设置 的 异常 提示 信息 ， 
并 且 最 终 弹 出 finally 区 域 中 的 信息 提示 。 程 序 代 码 如 下 : 


01 var str = "llike JavaScript"; /定义 字符 串 变量 

02 try{ 

03 document.write(str.charat(5)); /应 用 错误 的 方法 名 charat 
04 jcatch(exception){ 

05 alert(" 运 行 时 有 异常 发 生 "); // 弹 出 异常 提示 信息 

06 yinally{ 

07 alert(" 结 束 try..….catch...finally 语句 "); // 弹 出 提示 信息 

08 } 


由 于 在 使 用 charAt0 方 法 时 将 方法 的 大 小 写 输入 错误 ， 所 以 在 try 区 域 中 获取 字符 串 中 指定 位 置 的 字 
符 将 发 生 异常 ， 这 时 将 执行 catch 区 域 中 的 语句 ， 弹 出 相应 异常 提示 信息 的 对 话 框 。 运 行 结果 如 图 3.19 
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和 图 3.20 所 示 。 


全 结 过 try.catch..finally 襄 问 


图 3.19 弹出 异常 提示 对 话 框 图 3.20 弹出 结束 语句 对 话 框 


3.4.2 ”Error 对 象 


try.…catch...finally 语句 中 catch 通常 捕捉 到 的 对 象 为 Error 对 象 ， 当 运行 JavaScript 代码 时 ， 如 果 产 
生 了 错误 或 异常 ，JavaScript 就 会 生成 一 个 Error 对 象 的 实例 来 描述 错误 ， 该 实例 中 包含 了 一 些 特定 的 
错误 信息 。 

Error 对 象 有 以 下 两 个 属性 。 

回 ”name: 表示 异常 类 型 的 字符 串 。 

加 ”message: 实际 的 异常 信息 。 

例如 ， 将 异常 提示 信息 放置 在 弹出 的 提示 对 话 框 中 ， 其 中 包括 异常 的 具体 信息 以 及 异常 类 型 的 字 
符 串 。 程 序 代码 如 下 : 


01 var str = "like JavaScript"; /定义 字符 串 变量 
02 ty{ 
03 document.write(str.charat(5)); /应 用 错误 的 方法 名 charat 


04 jcatch(exception){ 

05 /弹出 实际 异常 信息 以 及 异常 类 型 的 字符 串 

06 alert(" 实 际 的 错误 消息 为 : "+exception.message+"m 错误 类 型 字符 串 为 : "+exception.name); 
O07 YY 


运行 结果 如 图 3.21 所 示 。 


实际 的 模 潜 洒 息 为 : 对 象 不 交 持 “charat” 履 住 或 方 法 
异 梁 半 型 字符 里 为 : TypeError 


图 3.21 异常 信息 提示 对 话 框 


3.4.3 ”使 用 throw 语句 抛 出 异常 


有 些 JavaScript 代码 并 没有 语法 上 的 错误 ， 但 存在 逻辑 错误 。 对 于 这 种 错误 ，JavaScript 是 不 会 抛 
出 异常 的 .这 时 , 就 需要 创建 一 个 Error 对 象 的 实例 , 并 使 用 throw 语句 来 抛 出 异常 .在 程序 中 使 用 throw 
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语句 可 以 有 目的 地 抛 出 异常 。 
语法 如 下 : 
throw new Error("somestatements"); 


参数 说 明 。 

throw: 抛 出 异常 关键 字 。 

例如 ， 定 义 一 个 变量 ， 值 为 1 与 0 的 商 ， 此 变量 的 结果 为 无 穷 大 ， 即 finity， 如 果 希 望 自行 检验 
除数 为 零 的 异常 ， 可 以 使 用 throw 语句 抛 出 异常 。 程 序 代码 如 下 : 


01 ty{ 

02 var num=1/0; /定义 变量 并 赋值 

03 if(num=="Infinity"X{ // 如 果 变 量 num 的 值 为 Infinity 
04 throw new Error(" 除 数 不 可 以 为 0"); /使 用 throw 语句 抛 出 异常 

05 } 

06 }catch(exception)\{ 

07 alert(exception.message); // 弹 出 实际 异常 信息 

08 } 


从 程序 中 可 以 看 出 ， 当 变量 num 为 无 穷 大 时 , 使 用 throw 语句 抛 出 异常 。 运行 结果 如 图 3.22 所 示 。 


图 3.22 ”使 用 throw 语句 抛 出 的 异常 
3.5 实 战 


3.5.1 获取 4 个 数字 中 的 最 小 值 


定义 4 个 数值 型 变量 ， 值 分 别 为 9、6、5、10， 应 用 简单 耻 语 句 获 取 这 4 个 数字 中 的 最 小 值 ， 运 
行 结果 如 图 3.23 所 示 。( 实例 位 置 : 资源 包 \ 源 码 \03\ 实 战 \01 ) 


全 9、6、5、10 四 个 数 的 最 小 二 为 5 


图 3.23 获取 4 个 数字 中 的 最 小 值 
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3.5.2 ”通过 do...while 语句 计算 10 的 阶乘 


通过 do...while 语句 计算 10 的 阶乘 (1*2*3*…*10)， 运 行 结果 如 图 3.24 所 示 。( 实例 位 置 : 资源 
包 \ 源 码 \03\ 实 战 \02 ) 


访 1 10-362sso0 


图 3.24 输出 10 的 阶乘 


3.5.3 计算 1~100 以 内 所 有 5 的 倍数 的 数字 之 和 


在 for 循环 语句 中 应 用 continue 语句 , 计算 1~100 以 内 所 有 5 的 倍数 的 数字 之 和 , 运行 结果 如 图 3.25 
所 示 。( 实例 位 置 : 资源 包 \ 源 码 \03\ 实 战 \03 ) 


3.6 小 结 


本 章 主要 讲解 了 JavaScript 中 的 基本 语句 ,包括 条 件 判断 语句 、 循 环 语句 、 跳 转 语 句 和 异常 处 理 语 
句 。 通 过 本 章 的 学 习 ， 读 者 可 以 掌握 这 些 基 本 语句 的 使 用 ， 这 些 基 本 语句 在 实际 编程 过 程 中 非常 常用 ， 
所 以 读者 一 定 要 熟练 掌握 。 


第 = 
上 早 
函数 
(后 | 视频 讲解 : 1 小 时 20 分 钟 ) 


函数 就 是 可 以 作为 一 个 逻辑 单元 对 待 的 一 组 JavaScript 代码 。 使 用 函数 可 以 使 
代码 更 为 简洁 ， 提 高 重用 性 。 如 果 一 段 具有 将 定 功能 的 程序 代码 需要 在 程序 中 多 次 
使 用 ， 就 可 以 先 杷 它 定义 成 西数 ， 然 后 在 需要 这 个 功能 的 地 方 调用 它 ， 这 样 就 不 必 
多 次 重 写 这 段 代码 。 另外， 将 实现 将 定 功 能 的 代码 段 组织 为 一 个 函数 也 有 利于 编写 
较 大 的 程序 。 在 JavaScript 中 ， 大 约 959% 的 代码 都 是 包含 在 函 教 中 的 。 由 此 可 见 ， 
函数 在 JavaScript 中 是 非常 重要 的 。 

通过 学 习 本 章 ， 读 者 主要 享 担 以 下 内 容 : 

JavaScript 中 国 数 的 定义 和 调用 

国 数 参数 和 返回 值 的 使 用 
JavaScript 中 的 岩 套 国 数 和 递归 国 数 
JavaScript 中 的 一 些 内 置 国 数 
匿名 田 数 的 使 用 
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4.1 函数 的 定义 和 调用 


在 程序 中 要 使 用 自己 定义 的 函数 ， 必 须 首先 对 函数 进行 定义 ， 而 在 定义 函数 时 ， 函 数 本 身 是 不 会 
执行 的 ， 只 有 在 调用 函数 时 才 会 执行 。 下 面 介绍 函数 的 定义 和 调用 的 方法 。 


4.1.1 函数 的 定义 


在 JavaScript 中 ， 可 以 使 用 fonction 语句 来 定义 一 个 函数 。 这 种 形式 是 由 关键 字 function、 函 数 名 加 
-组 参数 以 及 置 于 大 括号 中 需要 执行 的 一 段 代码 构成 的 。 使 用 function 语句 定义 函数 的 基本 语法 如 下 : 


function 函数 名 ([ 参 数 1, 参数 2,.…]X 
语句 


[return 返回 值 ] 
LL 
参数 说 明 。 
回 ”函数 名 : 必 选 ， 用 于 指定 函数 名 。 在 同一 个 页 面 中 ， 函 数 名 必须 是 唯一 的 ， 并 且 区 分 大 小 写 。 
回 ”参数 : 可 选 ， 用 于 指定 参数 列表 。 当 使 用 多 个 参数 时 ， 参 数 间 使 用 逗号 进行 分 隔 。 一 个 函数 
最 多 可 以 有 255 个 参数 。 
回 语句: 必 选 ， 是 函数 体 ， 用 于 实现 函数 功能 的 语句 。 
回 ”返回 值 : 可 选 ， 用 于 返回 函数 值 。 返 回 值 可 以 是 任意 的 表达 式 、 变 量 或 常量 。 
例如 ， 定 义 一 个 不 带 参数 的 函数 hello0， 在 函数 体 中 输出 “你 好 ”字符 串 。 有 具体 代码 如 下 : 


01 function hello(){ /定义 函数 名 称 为 hello 
02 document.write(" 你 好 "); /定义 函数 体 
03 } 


例如 ， 定 义 一 个 用 于 计算 商品 金额 的 函数 account0， 该 函数 有 两 个 参数 ， 用 于 指定 单价 和 数量 ， 
返回 值 为 计算 后 的 金额 。 具 体 代码 如 下 : 


01 function account(price,numberjf /定义 含有 两 个 参数 的 函数 
02 var sum=price*number:; /计算 金额 

03 return sum; // 返 回 计算 后 的 金额 

04 } 


4.1.2 函数 的 调用 

函数 定义 后 并 不 会 自动 执行 ， 要 执行 一 个 函数 需要 在 特定 的 位 置 调用 函数 。 调 用 函数 的 过 程 就 像 
启动 机 器 一 样 ， 机 器 本 身 是 不 会 自动 工作 的 ， 只 有 按 下 开关 来 调用 这 个 机 器 ， 它 才 会 执行 相应 的 操作 。 
调用 函数 需要 创建 调用 语句 ， 调 用 语句 包含 函数 名 称 、 参 数 具体 值 。 
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1. 函数 的 简单 调用 
函数 调用 的 语法 格式 如 下 : 
函数 名 (传递 给 函数 的 参数 1, 传 递 给 函数 的 参数 2, .…); 


函数 的 定义 语句 通常 被 放 在 HTML 文件 的 <head> 段 中 , 而 函数 的 调用 语句 可 以 放 在 HTML 文件 中 
的 任何 位 置 。 

例如 ， 定 义 一 个 函数 outputImage0， 这 个 函数 的 功能 是 在 页 面 中 输出 一 张 图 片 ， 然 后 通过 调用 这 
个 函数 实现 图 片 的 输出 ， 代 码 如 下 : 


01 <html> 

02 <head> 

03 <meta charset="UTF-8"> 

04 <title> 函 数 的 简单 调用 </title> 

05 <script type="text/javascript"> 

06 function outputimage()f /定义 函数 
07 document.write("<img src='rabbitjpg'>"); /定义 函数 体 
08 1 

09 </script> 

10 </head> 

11 <body> 

12 <scripttype="text/javascript"> 

13 outputimage(); // 调 用 函数 
14 </script> 

15 </body> 

16 </html> 


运行 结果 如 图 4.1 所 示 。 es 


Er 


2. 在 事件 响应 中 调用 函数 文件 站” 六 吉日 ， 豆 要 NY) 履 主 交 A 工具 TT 二 (HH) - 


当 用 户 单 击 某 个 按钮 或 选中 某 个 复 选 框 时 都 将 触发 事 
件 ， 通 过 编写 程序 对 事件 做 出 反应 的 行为 称 为 响应 事件 ， 在 
JavaScript 语言 中 , 将 函数 与 事件 相关 联 就 完成 了 响应 事件 的 
过 程 。 例 如 ， 按 下 开关 按钮 打开 电灯 就 可 以 看 作 是 一 个 响应 
事件 的 过 程 ， 按 下 开关 相当 于 触发 了 单 击 事件 ， 而 电灯 亮 起 
就 相当 于 执行 了 相应 的 函数 。 

例如 ， 当 用 户 单 击 某 个 按钮 时 执行 相应 的 函数 ， 可 以 使 图 4.1 调用 函数 输出 图 片 
用 如 下 代码 实现 该 功能 。 

01 <scripttype="text/javascript"> 

02 function test(){ /定义 函数 

03 alert(" 我 喜欢 JavaScript "); /定义 函数 体 

04 

05 

06 <form action=”method="post" name="form1"> 
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07 <input type="button" value=" 提 交 " onClick="test():"><!L- 在 事件 触发 时 调用 自 定义 函数 -> 
08 </form> 


在 上 述 代 码 中 可 以 看 出 ， 首 先 定 义 一 个 名 为 testO 的 函数 ， 函 数 体 比较 简单 ， 使 用 alert0 语 句 输出 
一 个 字符 串 ， 最 后 在 按钮 onClick 事件 中 调用 test0 函 数 。 当 用 户 单 击 “ 提 交 ” 按 钮 后 将 弹出 相应 对 话 
框 。 运 行 结果 如 图 4.2 所 示 。 


3. 通过 链接 调用 函数 


函数 除了 可 以 在 响应 事件 中 被 调用 之 外 , 还 可 以 在 链接 中 被 调用 ,在 <a> 标 签 中 的 href 属性 中 使 用 
“javascript: 函 数 名 0” 格 式 来 调用 函数 ， 当 用 户 单 击 这 个 链接 时 ， 相 关 函 数 将 被 执行 ， 下 面 的 代码 实 
现 了 通过 链接 调用 函数 。 


01 <scripttype="text/javascript"> 


02 function test({ /定义 函数 

03 alert(" 我 喜欢 JavaScript"); /定义 函数 体 

04 } 

05 </script> 

06 ”<a href="javascript:test();"> 单 击 链 接 </a> <!-- 在 链接 中 调用 自 定义 函数 --> 
运行 程序 ， 当 用 户 单 击 “ 单 击 链接 ”后 将 弹出 相应 对 话 框 。 运 行 结 果 如 图 4.3 所 示 。 


(®S | evcedwstos 
文件 月 。 半日 


图 4.2 在 事件 响应 中 调用 函数 图 4.3 通过 单 击 链接 调用 函数 


4.2 函数 的 参数 


定义 函数 时 指定 的 参数 称 为 形式 参数 ， 简 称 形 参 ， 而 把 调用 函数 时 实际 传递 的 值 称 为 实际 参数 ， 
简称 实 参 。 如 果 把 函数 比喻 成 一 台 生 产 的 机 器 ， 那 么 ， 运 输 原材料 的 通道 就 可 以 看 作 形 参 ， 而 实际 运 
输 的 原材料 就 可 以 看 作 是 实 参 。 
在 JavaScript 中 定义 函数 参数 的 格式 如 下 : 
function 函数 名 ( 形 参 1, 形 参 2,.….】{ 
函数 体 
} 


定义 函数 时 ， 在 函数 名 后 面 的 圆 括号 内 可 以 指定 一 个 或 多 个 参数 (参数 之 间 用 逗号 “,” 分 隔 )。 指 
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定 参 数 的 作用 在 于 ， 当 调用 函数 时 ， 可 以 为 被 调用 的 函数 传递 一 个 或 多 个 值 。 

如 果 定 义 的 函数 有 参数 ， 那 么 调用 该 函数 的 语法 格式 如 下 : 

函数 名 ( 实 参 1, 实 参 2,.…) 

通常 ， 在 定义 函数 时 使 用 了 多 少 个 形 参 ， 在 函数 调用 时 也 会 给 出 多 少 个 实 参 ， 这 里 需要 注意 的 是 ， 
实 参 之 间 也 必须 用 逗号 “,” 分 隔 。 

例如 ， 定 义 一 个 带 有 两 个 参数 的 函数 ， 这 两 个 参数 用 于 指定 姓名 和 年 龄 ， 然 后 对 它们 进行 输出 ， 
代码 如 下 : 


01 function userlnfo(name,agej{f // 定 义 含 有 两 个 参数 的 函数 
02 alert(" 姓 名 :"+name+" 年 龄 : "+age); // 输 出 字符 串 和 参数 的 值 
03 3} 

04 ”userlnfo(" 张 三 ",25); // 调 用 函数 并 传递 参数 
运行 结果 如 图 4.4 所 示 。 


【 例 4.01】 定义 一 个 用 于 输出 图 书 名 称 和 图 书 作 者 的 函数 ， 在 调用 函数 时 将 图 书 名 称 和 图 书 作 
者 作为 参数 进行 传递 。 代 码 如 下 :( 实例 位 置 : 资源 包 \ 源 码 \04\4.01 ) 


01 <scripttype="text/javascript"> 


02 function show(bookname,author}{ /定义 函数 

03 alert(" 图 书 名 称 : "+bookname+"n 图 书 作 者 : "+author); // 在 页 面 中 弹出 对 话 框 
04 } 

05 show(" 零 基础 学 JavaScript"," 明 日 科技 "); // 调 用 函数 并 传递 参数 
06 </script> 


运行 结果 如 图 4.5 所 示 。 


医书 入 称 : 二 基 古 学 Javascript 
于 书 作者 : 明日 各 控 


图 4.4 输出 函数 的 参数 图 4.5 输出 图 书 名 称 和 图 书 作者 


4.3 函数 的 返回 值 


对 于 函数 调用 ， 可 以 通过 参数 向 函数 传递 数据 ， 也 可 以 从 函数 获取 数据 ， 也 就 是 说 函数 可 以 返回 
值 。 在 JavaScript 的 函数 中 ， 可 以 使 用 retum 语句 为 函数 返回 一 个 值 。 

语法 如 下 : 

return 表达 式 ; 


这 条 语句 的 作用 是 结束 函数 ， 并 把 其 后 表达 式 的 值 作为 函数 的 返回 值 。 例 如 ， 定 义 一 个 计算 两 个 
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数 的 积 的 函数 ， 并 将 计算 结果 作为 函数 的 返回 值 ， 代 码 如 下 : 


01 <scripttype="text/javascript"> 


02 function sum(x,y}{ /定义 含有 两 个 参数 的 函数 

03 Var Z=X*y; /获取 两 个 参数 的 积 

04 return z; // 将 变量 z 的 值 作为 函数 的 返回 值 
05 } 

06 alert("10*20="+sum(10,20)); // 调 用 函数 并 输出 结果 

07 </script> 


运行 结果 如 图 4.6 所 示 。 
函数 返回 值 可 以 直接 赋 给 变量 或 用 于 表达 式 中 ， 也 就 是 说 函数 调用 可 以 出 现在 表达 式 中 。 例 如 ， 
将 上 面 示例 中 函数 的 返回 值 赋 给 变量 result， 然 后 再 进行 输出 ， 代 码 如 下 : 


01 function sum(x,y}{ /定义 含有 两 个 参数 的 函数 

02 Var Z=X*y; /获取 两 个 参数 的 积 

03 return z; // 将 变量 z 的 值 作为 函数 的 返回 值 
04 } 

05 varresult=sum(10,20); // 将 函数 的 返回 值 赋 给 变量 result 
06 alert(result); // 输 出 结果 


【 例 4.02】 ”模拟 淘宝 网 计算 购物 车 中 商品 总 价 的 功能 。 假 设 购物 车 中 有 如 下 商品 信息 : 

Q@ 芋 果 手机 : 单价 5000 元 ， 购 买 数 量 2 台 。 

@ 联想 笔记 本 电脑 : 单价 4000 元 ， 购 买 数 量 10 台 。 

定义 一 个 带 有 两 个 参数 的 函数 price0， 将 商品 单价 和 商品 数量 作为 参数 进行 传递 。 通 过 调用 函数 
并 传递 不 同 的 参数 分 别 计算 苹果 手机 和 联想 笔记 本 电脑 的 总 价 ， 最 后 计算 购物 车 中 所 有 商品 的 总 价 并 
输出 。 代 码 如 下 :( 实例 位 置 : 资源 包 \ 源 码 \04\4.02 ) 


01 <scripttype="text/javascript"> 


02 function price(unitPrice,number}{ /定义 函数 ， 将 商品 单价 和 商品 数量 作为 参数 传递 
03 var totalPrice=unitPricernumber' // 计 算 单个 商品 总 价 

04 return totalPrice; // 返 回 单个 商品 总 价 

05 } 

06 var phone = price(5000,2); // 调 用 函数 ， 计 算 手机 总 价 

07 var computer = price(4000,10); // 调 用 函数 ， 计 算 笔 记 本 电脑 总 价 

08 var total=phone+computer; // 计 算 所 有 商品 总 价 

09 alert(" 购 物 车 中 商品 总 价 :"+total+" 元 "); 。“”// 输 出 所 有 商品 总 价 

10 </script> 


全 10"20=200 全 风物 车 十 商 吕 总 价 : 50000 元 


图 4.6 计算 并 输出 两 个 数 的 积 图 4.7 输出 购物 车 中 的 商品 总 价 
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在 JavaScript 中 允许 使 用 嵌 套 函数 , 嵌 套 函数 就 是 在 一 个 函数 的 函数 体 中 使 用 了 其 他 的 函数 。 幅 套 
函数 的 使 用 包括 函数 的 嵌 套 定义 和 函数 的 嵌 套 调用 ， 下 面 分 别 进行 介绍 。 


4.4.1 函数 的 诬 套 定义 


函数 的 嵌 套 定义 就 是 在 函数 内 部 再 定义 其 他 的 函数 。 例 如 ， 在 一 个 函数 内 部 嵌 套 定义 另 一 个 函数 
的 代码 如 下 : 


01 function outFun(X{ // 定 义 外 部 函数 

02 function inFun(x,yX{ /定义 内 部 函数 

03 alert(x+y); // 输 出 两 个 参数 的 和 

04 } 

05 inFun(1,5); // 调 用 内 部 函数 并 传递 参数 
06 } 

07 outFun(); // 调 用 外 部 函数 

运行 结果 如 图 4.8 所 示 。 


图 4.8 输出 两 个 参数 的 和 
在 上 述 代 码 中 定义 了 一 个 外 部 函数 outFun()， 在 该 函数 的 内 部 又 柑 套 定义 了 一 个 函数 inFun0， 它 
的 作用 是 输出 两 个 参数 的 和 ， 最 后 在 外 部 函数 中 调用 了 内 部 函数 。 


意 
虽然 在 JavaScript 中 允许 函数 的 嵌 套 定义 ， 但 它 会 使 程序 的 可 读 必 降低， 因此， 尽量 避免 使 用 
这 种 定义 谈 套 函数 的 方式 。 


4.4.2 ”函数 的 肉 套 调用 


在 JavaScript 中 ， 人 允许 在 一 个 函数 的 函数 体 中 对 另 一 个 函数 进行 调用 ， 这 就 是 函数 的 嵌 套 调用 。 例 
如 ， 在 函数 b0 中 对 函数 a0 进 行 调用 ， 代 码 如 下 : 
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01 function a()f /定义 函数 a() 

02 alert(" 零 基础 学 JavaScript"); // 输 出 字符 串 

03 } 

04 function b(}{ /定义 函数 b() 

05 al); /在 函数 b() 中 调用 函数 a() 
06 } 

07 bi; // 调 用 函数 b() 


运行 结果 如 图 4.9 所 示 。 

【 例 4.03】 《我 是 歌 王 》 的 比赛 中 有 3 位 评委 ， 在 选手 演唱 完毕 后 ，3 位 评委 分 别 给 出 分 数 ， 
将 3 个 分 数 的 平均 分 作为 该 选手 的 最 后 得 分 。 周 星星 在 演唱 完毕 后 , 3 位 评委 给 出 的 分 数 分 别 为 91 分 、 
89 分 、93 分 ,通过 函数 的 嵌 套 调用 获取 周 星 星 的 最 后 得 分 。 代 码 如 下 : ( 实例 位 置 : 资源 包 \ 源 码 \04\4.03 ) 


01 <scripttype="text/javascript"> 


02 function getAverage(score1,score2,score3j{ // 定 义 含有 3 个 参数 的 函数 
03 var average=(score1+score2+score3)/3; // 获 取 3 个 参数 的 平均 值 
04 return average; // 返 回 average 变量 的 值 
05;, 3} 

06 function getResult(score1,score2,score3\{ // 定 义 含有 3 个 参数 的 函数 


07 /输出 传递 的 3 个 参数 值 
08 document.write("3 个 评委 给 出 的 分 数 分 别 为 :"+score1+" 分 、"+score2+" 分 、"+score3+" 分 <br>"); 


09 var result=getAverage(score1,score2,score3); /调用 getAverage() 函 数 
10 document.write(" 周 星星 的 最 后 得 分 为 :"+result+" 分 "); 1/ 输 出 函数 的 返回 值 

i 

12 getResult(91,89,93); // 调 用 getResult() 函 数 
13 </script> 


运行 结果 如 图 4.10 所 示 。 


人 ?script 


图 4.9 函数 的 嵌 套 调用 并 输出 结果 图 4.10 输出 选手 最 后 得 分 


45 递归 函数 


谓 归 函 数 就 是 函数 在 自身 的 函数 体内 调用 自身 ， 使 用 递归 函数 时 一 定 要 当心 ， 处 理 不 当 会 使 
程序 进入 死 循 环 ， 递 归 函 数 只 在 特定 的 情况 下 使 用 ， 如 处 理 阶 乘 问题 。 
语法 如 下 : 
function 函数 名 (参数 1X{ 
函数 名 (参数 2); 
} 


第 4 章 函数 


例如 ， 使 用 递归 函数 取得 10! 的 值 ， 其 中 10!=10*9!， 而 9!=9*8!， 以 此 类 推 , 最 后 1!=1， 这 样 的 数 
学 公式 在 JavaScript 程序 中 可 以 很 容易 使 用 函数 进行 描述 ， 可 以 使 用 fm) 表示 ml 的 值 ， 当 1<n<10 时 ， 
fn)=n*fn-1D)， 当 n 和 1 时 ，f(m)=1。 代 码 如 下 : 


01 function f(num)}{ /定义 递归 函数 

02 if(num<=1X{ /如果 参 数 num 的 值 小 于 等 于 1 
03 return 1; /返回 1 

04 Jelse{ 

05 return fnum-1)*num; // 调 用 递归 函数 

06 小 

07 } 

08 ”alert("10! 的 结果 为 :"+f(10)); // 调 用 函数 输出 10 的 阶乘 


本 实例 运行 结果 如 图 4.11 所 示 。 


访 1ossms 为 :362ss00 


图 4.11 输出 10 的 阶乘 
在 定义 递归 函数 时 需要 两 个 必要 条 件 。 
回 ”包括 一 个 结束 递归 的 条 件 。 
如 上 面 示例 中 的 这 num<=1) 语 句 ， 如 果 满 足 条 件 则 执行 “returm 1;” 语 句 ， 不 再 递归 。 
回 ”包括 一 个 递归 调用 语句 。 
如 上 面 示例 中 的 “retum fnum-l)*num: ”语句 ， 用 于 实现 调用 递归 函数 。 


4.6 变量 的 作用 域 


变量 的 作用 域 是 指 变量 在 程序 中 的 有 效 范围 ， 在 有 效 范围 内 可 以 使 用 该 变量 。 变 量 的 作用 域 取决 
于 该 变量 是 哪 一 种 变量 。 


4.6.1 全 局 变量 和 局 部 变量 


在 JavaScript 中 ,变量 根据 作用 域 可 以 分 为 两 种 : 全 局 变量 和 局 部 变量 。 全 局 变量 是 定义 在 所 有 函 
数 之 外 的 变量 ， 作 用 范围 是 该 变量 定义 后 的 所 有 代码 ; 局 部 变量 是 定义 在 函数 体内 的 变量 ， 只 有 在 该 
函数 中 ， 且 该 变量 定义 后 的 代码 中 才 可 以 使 用 这 个 变量 ， 函 数 的 参数 也 是 局 部 性 的 ， 只 在 函数 内 部 起 
作用 。 如 果 把 函数 比 作 一 台 机 器 ， 那 么 ， 在 机 器 外 摆 放 的 原材料 就 相当 于 全 局 变量 ， 这 些 原材料 可 以 
为 所 有 机 器 使 用 ， 而 机 器 内 部 所 使 用 的 原材料 就 相当 于 局 部 变量 。 

例如 ， 下 面 的 程序 代码 说 明了 变量 的 作用 域 的 有 效 范围 : 
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01 ”var a=" 这 是 全 局 变量 "; // 该 变量 在 函数 外 声明 ， 作 用 于 整个 脚本 
02 function send(}{ /定义 函数 

03 Var b=" 这 是 局 部 变量 "; // 该 变量 在 函数 内 声明 ， 只 作用 于 该 函数 体 
04 document.write(a+"<br>"); // 输 出 全 局 变量 的 值 

05 document.write(b); // 输 出 局 部 变量 的 值 

06 } 

07 send(); // 调 用 函数 

运行 结果 为 : 

这 是 全 局 变量 

这 是 局 部 变量 


上 述 代 码 中 ， 局 部 变量 b 只 作用 于 函数 体 ， 如 果 在 函数 之 外 输出 局 部 变量 b 的 值 将 会 出 现 错误 。 
错误 代码 如 下 : 


01 ”var a=" 这 是 全 局 变量 "; // 该 变量 在 函数 外 声明 ， 作 用 于 整个 脚本 

02 function send(}{ /定义 函数 

03 Var b=" 这 是 局 部 变量 "; // 该 变量 在 函数 内 声明 ， 只 作用 于 该 函数 体 

04 document.write(a+"<br>"); // 输 出 全 局 变量 的 值 

05 } 

06 send(); ll 调用 函数 

07 document.write(b); /错误 代码 ， 不 允许 在 函数 外 输出 局 部 变量 的 值 


4.6.2 变量 的 优先 级 


如 果 在 函数 体 中 定义 了 一 个 与 全 局 变量 同名 的 局 部 变量 , 那么 该 全 局 变量 在 函数 体 中 将 不 起 作用 。 
例如 ， 下 面 的 程序 代码 将 输出 局 部 变量 的 值 : 


01 ”var a=" 这 是 全 局 变量 "; // 声 明 一 个 全 局 变量 a 

02 function send(){ /定义 函数 

03 var a=" 这 是 局 部 变量 "; // 声 明 一 个 和 全 局 变量 同名 的 局 部 变量 a 
04 document.write(a); // 输 出 局 部 变量 a 的 值 

05 3 

06 send(); // 调 用 函数 

运行 结果 为 : 

这 是 局 部 变量 


上 述 代码 中 , 定义 了 一 个 和 全 局 变量 同名 的 局 部 变量 a， 此 时 在 函数 中 输出 变量 a 的 值 为 局 部 变量 
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在 使 用 JavaScript 语言 时 ， 除 了 可 以 自 定义 函数 之 外 ， 还 可 以 使 用 JavaScript 的 内 置 函 数 ， 这 些 内 


置 函 数 是 由 JavaScript 语言 自身 提供 的 函数 。JavaScript 中 的 一 些 主 要 内 置 函 数 如 表 4.1 所 示 。 
表 4.1 JavaScript 中 的 一 些 内 置 函 数 


函数 说 明 
ParseIntO 将 字符 型 转换 为 整 型 

3TSEEFloat 将 字符 型 转换 为 浮 点 型 
isNaNO 判断 一 个 数值 是 否 为 NaN 
isFiniteO 判断 一 个 数值 是 否 有 限 
eval0 求 字符 串 中 表达 式 的 值 
encodeURI 将 URI 字 符 串 进行 编码 
decodeURI 对 已 编码 的 URI 字符 串 进行 解码 

下 面 将 对 这 些 内 置 函 数 做 详细 介绍 。 


4.7.1 数值 处 理 函 数 


1. parselnt() 函 数 


parseInt0 函 数 主要 将 首位 为 数字 的 字符 串 转 换 成 数字 , 如 果 字 符 串 不 是 以 数字 开头 , 那么 将 返回 NaN。 


语法 如 下 : 
parselnt(string,[n]) 


参数 说 明 。 
回 string: 需要 转换 为 整 型 的 字符 串 。 


回 n: 用 于 指出 字符 串 中 的 数据 是 几 进 制 的 数据 。 这 个 参数 在 函数 中 不 是 必需 的 。 


例如 ， 将 字符 串 转换 成 数字 的 示例 代码 如 下 : 


01 var str1="123abc"' 

02 var str2="abc123"; 

03 document.write(parselnt(str1)+"<br>"); 
04 document.write(parselnt(str1,8)+"<br>"); 
05 document.write(parselnt(str2)); 


运行 结果 为 : 


123 
83 
NaN 


2. parseFloat() 函 数 


parseFloatO 函 数 主 要 将 首位 为 数字 的 字符 串 转换 成 浮 点 型 数字 ， 如 果 字 符号 


么 将 返回 NaN。 
语法 如 下 : 


parseFloat(string) 


// 定 义 字符 串 变量 

// 定 义 字符 串 变量 

// 将 字符 串 str1 转换 成 数字 并 输出 

// 将 字符 串 str1 中 的 八进制 数字 进行 输出 
// 将 字符 串 str2 转换 成 数字 并 输出 


不 是 以 数字 开头 ， 


那 
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参数 说 明 。 
string: 需要 转换 为 浮 点 型 的 字符 串 。 
例如 ， 将 字符 串 转 换 成 浮 点 型 数字 的 示例 代码 如 下 : 


01 var str1="123.456abc"'; /定义 字符 串 变量 
02 var str2="abc123.456"; /定义 字符 串 变量 
03 document.write(parseFloat(str1)+"<br>"); // 将 字符 串 str1 转换 成 浮 点 数 并 输出 
04 document.write(parseFloat(str2)); // 将 字符 串 str2 转换 成 浮 点 数 并 输出 


运行 结果 为 : 


123.456 
NaN 


3. isNaN() 函 数 

isNaNO 函 数 主要 用 于 检验 某 个 值 是 否 为 NaN。 
语法 如 下 : 

isNaN(num) 

参数 说 明 。 

num: 需要 验证 的 数字 。 


SA 


如 果 参 数 num 为 NaN， 函 数 返回 值 为 tue; 如 果 参 数 num 不 是 NaN， 函 数 返回 值 为 false。 


例如 ， 判 断 其 参数 是 否 为 NaN 的 示例 代码 如 下 : 


01 var num1=123; /定义 数值 型 变量 

02 var num2="123abc"'; /定义 字符 串 变量 

03 document.write(isNaN(num1)+"<br>"); /判断 变量 num1 的 值 是 否 为 NaN 并 输出 结果 
04 document.write(isNaN(num2)); // 判 断 变量 num2 的 值 是 否 为 NaN 并 输出 结果 
运行 结果 为 : 

false 

true 


4. isFinite() 函 数 

isFiniteO) 函 数 主 要 用 于 检验 其 参数 是 否 有 限 。 
语法 如 下 : 

isFinite(num) 

参数 说 明 。 

num: 需要 验证 的 数字 。 
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A. 
入 四 
如 果 参 数 num 是 有 限 数字 (或 可 转换 为 有 限 数字 ) ， 函 数 返回 值 为 tue; 如 果 参 数 num 是 NaN 
或 无 穷 大 ， 函 数 返回 值 为 false。 
例如 ， 判 断 其 参数 是 否 为 有 限 的 示例 代码 如 下 : 


01 document.write(isFinite(123)+"<br>"); /| 判断 数值 123 是 否 为 有 限 并 输出 结果 
02 ”document.write(isFinite("123abc")+"<br>"); 。“”// 判 断 字符 串 "123abc" 是 否 为 有 限 并 输出 结果 
03 document.write(isFinite(1/0)); // 判 断 1/0 的 结果 是 否 为 有 限 并 输出 结果 


运行 结果 为 : 


true 
false 
false 


4.7.2 字符 串 处 理 函 数 


1.， eval() 函 数 

evalO 函 数 的 功能 是 计算 字符 串 表 达 式 的 值 ， 并 执行 其 中 的 JavaScript 代码 。 
语法 如 下 : 

eval(string) 

参数 说 明 。 

string: 需要 计算 的 字符 串 ， 其 中 含有 要 计算 的 表达 式 或 要 执行 的 语句 。 
例如 ， 应 用 eval0 函 数 计算 字符 串 的 示例 代码 如 下 : 


01 document.write(eval("3+6")); // 计 算 表达 式 的 值 并 输出 结果 
02 document.write("<br>"); // 输 出 换行 标签 

03 eval("x=5;y=6;document.write(x*y)"); /执行 代码 并 输出 结果 
运行 结果 为 : 

9 

30 


2. encodeURI() 函 数 


encodeURIO 函 数 主要 用 于 将 URI 字符 串 进行 编码 。 
语法 如 下 : 


encodeURI(url) 


参数 说 明 。 
ul: 需要 编码 的 URI 字符 串 。 
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NO 


URI 与 URL 都 可 以 表示 网 络 资源 地 址 , URI 比 URL 表示 范围 更 加 广泛 , 但 在 一 般 情况 下 , URI 
与 URL 可 以 是 等 同 的 。encodeURIO 函 数 只 对 字符 串 中 有 意义 的 字符 进行 转 义 。 例 如 将 字符 串 中 的 
空格 转换 为 “%20” 。 


例如 ， 应 用 encodeURIO 函 数 对 URI 字符 串 进 行 编码 的 示例 代码 如 下 : 


01 var URI="http://127.0.0.1/save.html?name= 测 试 "; /定义 URI 字符 串 
02 document.write(encodeURI(URI)); // 对 URI 字符 串 进行 编码 并 输出 
运行 结果 为 : 


http://127.0.0.1/save.html?name=%E6%B5%8B%E8%AF%95 


3. decodeURI() 函 数 

decodeURIO 函 数 主要 用 于 对 已 编码 的 URI 字 符 串 进行 解码 。 
语法 如 下 : 

decodeURI(url) 


参数 说 明 。 
wl: 需要 解码 的 URI 字符 串 。 


/ 
0 涪 田 
此 函数 可 以 将 使 用 encodeURIO 函 数 转 码 的 网 络 资源 地 址 转换 为 字符 串 并 返回 ， 也 就 是 说 ， 
decodeURIO 函 数 是 encodeURIO 函 数 的 逆向 操作 。 
例如 ， 应 用 decodeURIO 函 数 对 URI 字符 串 进行 解码 的 示例 代码 如 下 : 


01 var URI=encodeURI("http://127.0.0.1/save.html?name= 测 试 "); /对 URI 字符 串 进行 编码 
02 document.write(decodeURI(URI)); // 对 编码 后 的 URI 字符 串 进行 解码 并 输出 


运行 结果 为 : 


7.0.0.1/save.html?name= 测 试 


4.8 定义 匿名 函数 


除了 使 用 基本 的 function 语句 之 外 ， 还 可 使 用 另外 两 种 方式 来 定义 函数 ， 即 在 表达 式 中 定义 函数 
和 使 用 Function0 构 造 函数 来 定义 函数 。 因 为 在 使 用 这 两 种 方式 定义 函数 时 并 未 指定 函数 名 ， 所 以 也 被 
称 为 匿名 函数 ， 下 面 分 别 对 这 两 种 方式 进行 介绍 。 
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4.8.1 在 表达 式 中 定义 函数 

在 JavaScript 中 提供 了 一 种 定义 匿名 函数 的 方法 ， 就 是 在 表达 式 中 直接 定义 函数 ， 它 的 语法 和 
function 语句 非常 相似 。 

语法 如 下 : 

var 变量 名 = function( 参 数 1, 参 数 2,….){ 

函数 体 

上 

这 种 定义 函数 的 方法 不 需要 指定 函数 名 ， 把 定义 的 函数 赋值 给 一 个 变量 ， 后 面 的 程序 就 可 以 通过 
这 个 变量 来 调用 这 个 函数 ， 这 种 定义 函数 的 方法 有 很 好 的 可 读 性 。 

例如 ， 在 表达 式 中 直接 定义 一 个 返回 两 个 数字 和 的 匿名 函数 ， 代 码 如 下 : 

01 <scripttype="text/javascript"> 


02 var sum = function(x,y){ /定义 匿名 函数 

03 return x+y; // 返 回 两 个 参数 的 和 
[2 

05 alert("10+20="+sum(10,20)); // 调 用 函数 并 输出 结果 
06 </script> 


运行 结果 如 图 4.12 所 示 。 

在 以 上 代码 中 定义 了 一 个 匿名 函数 ， 并 把 对 它 的 引用 存储 在 变量 sum 
中 。 该 函数 有 两 个 参数 ， 分 别 为 x 和 y。 该 函数 的 函数 体 为 “return x+y”， 
即 返回 参数 x 与 参数 y 的 和 。 

【 例 4.04】 编写 一 个 带 有 一 个 参数 的 匿名 函数 ， 该 参数 用 于 指定 显 
示 多 少 层 星 号 “*” 通过 传递 的 参数 在 页 面 中 输出 6 层 星 号 的 金字 塔 形 图 
案 。 代 码 如 下 :( 实例 位 置 资源 包 \ 源 码 \04\4.04 ) 


惫 10:20-3o 


[| 


图 4.12 输出 两 个 数字 的 和 


01 <scripttype="text/javascript"> 


02 var star=function(n){f /定义 匿名 函数 

03 for(vari=1; i<=n; i++){ /定义 外 层 for 循环 语句 
04 for(var j=1; j<=n-i; j++){ // 定 义 内 层 for 循环 语句 
05 document.write("&nbsp;"); // 输 出 空格 

06 } 

07 for(var j=1; j<=i; j++X{ // 定 义 内 层 for 循环 语句 
08 document.write("*&nbsp;"); // 输 出“*” 和 空格 

09 } 

10 document.write("<br>"); // 输 出 换行 标记 

a } 

2 

13 star(6); // 调 用 函数 并 传递 参数 
14 </script> 


AS 全 四 


该 实例 的 编码 格式 设置 为 GB2312， 另 外 ， 在 不 同 的 浏览 器 下 运行 该 实例 ， 显 示 效 果 会 略 有 不 同 。 ， 
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运行 结果 如 图 4.13 所 示 。 


司 ENcodevstw4o4incP - 上 
文件 病 间 日 ”查看 (V) 收 吉 天 (A) 工具 [D。 吉 动 (H) 
下 


团 4.13 粕 出 多 层 导 号 金字 省 形 图 穴 
4.8.2 使 用 Function() 构 造 函 数 


除了 在 表达 式 中 定义 函数 之 外 , 还 有 一 种 定义 匿名 函数 的 方法 一 一 使 用 Function0) 构 造 函 数 来 定义 
函数 。 这 种 方式 可 以 动态 地 创建 函数 。 

var 变量 名 = new Function(" 参 数 1"," 参 数 2",.…." 函 数 体 "); 

使 用 Function0 构 造 函 数 可 以 接收 一 个 或 多 个 参数 作为 函数 的 参数 ， 也 可 以 一 个 参数 也 不 使 用 。 
Function0 构 造 函 数 的 最 后 一 个 参数 为 函数 体 的 内 容 。 


意 > 
| Function0 构 造 函 数 中 的 所 有 参数 和 函数 体 都 必须 是 字符 串 类 型 ,因此 一 定 要 用 双 引 号 或 单 引号 
”引起 来 。 

例如 ， 使 用 Function0 构 造 函 数 定义 一 个 计算 两 个 数字 和 的 函数 ， 代 码 如 下 : 
01 varsum = new Function("x","y","alert(x+y):"); /使 用 Function() 构 造 函 数 定义 函数 
02 sum(10,20); // 调 用 函数 


运行 结果 如 图 4.14 所 示 。 


图 4.14 输出 两 个 数字 的 和 
上 述 代 码 中 ，sum 并 不 是 一 个 函数 名 ， 而 是 一 个 指向 函数 的 变量 ， 因 此 ， 使 用 Function0 构 造 函数 
创建 的 函数 也 是 匿名 函数 。 在 创建 的 这 个 构造 函数 中 有 两 个 参数 ， 分 别 为 x 和 y。 该 函数 的 函数 体 为 
“alert(x+y)” 即 输 出 x 与 y 的 和 。 


4.9 实 战 


4.9.1 判断 身高 为 1.3 米 的 儿童 需要 购买 哪 种 车 票 


在 为 儿童 购买 车 票 时 ， 如 果 儿 童 身高 在 1.2 米 以 内 ， 则 免票 ， 如果 儿 童 身高 在 1.2 米 到 1.5 米 之 间 ， 
须 购买 儿童 票 ， 身 高 超过 1.5 米 的 须 购买 全 价 车 票 。 将 儿童 的 身高 作为 函数 的 参数 进行 传递 ， 判 断 身高 
为 1.3 米 的 儿童 需要 购买 哪 种 车 票 ， 运 行 结果 如 图 4.15 所 示 。( 实例 位 置 : 资源 包 \ 源 码 \04\ 实 战 \01 ) 
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4.15 ”输出 身高 为 1.3 米 的 儿童 需要 购买 哪 种 车 票 


4.9.2 判断 微 信号 和 密码 是 否 正确 


模拟 微 信 登录 的 功能 。 假 设 某 用 户 的 微 信号 为 mr， 密 码 为 mrsoft， 应 用 匿名 函数 判断 微 信号 mra 
和 密码 mrsoft 是 否 能 登录 成 功 ， 运 行 结 果 如 图 4.16 所 示 。( 实例 位 置 : 资源 包 \ 源 码 \04\ 实 战 \02 ) 


4.10 小 结 


本 章 主 要 讲解 了 JavaScript 中 函数 的 使 用 ， 包 括 定义 函数 、 调 用 函数 、 使 用 函数 的 参数 和 返回 值 、 
撕 套 函数 、 递 归 函 数 、 变 量 的 作用 域 、 内 置 函数 以 及 定义 匿名 函数 的 方法 。 函 数 在 JavaScript 中 非常 重 
要 ，JavaScript 程序 的 任何 位 置 都 可 以 通过 引用 其 名 称 来 执行 。 在 程序 中 可 以 建立 很 多 函数 ， 这 有 利于 
组 织 自 己 的 应 用 程序 的 结构 ， 使 程序 代码 的 维护 与 修改 更 加 容易 。 
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第 章 
自 定义 对 象 
( 僵 视频 讲解 : 1 小 时 11 分 钟 ) 


由 于 JavaScript 是 一 种 基于 对 象 的 话 言 ， 因 此 对 象 在 JavaScript 中 是 很 重要 的 
概念 。 本 章 将 对 对 象 的 基本 概念 和 自 定 义 对 象 的 基础 知识 进行 简单 介绍 。 

通过 学 习 本 章 ， 读 者 主要 可 握 以 下 内 容 ， 

站 JavaScript 中 的 对 象 简介 

MW 创建 自 定义 对 象 的 3 种 方法 

MW 两 种 对 象 访问 语句 的 使 用 
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5.1 对 象 简 介 


对 象 是 JavaScript 中 的 数据 类 型 之 一 ， 是 一 种 复合 的 数据 类 型 ， 它 将 多 种 数据 类 型 集中 在 一 个 数据 
单元 中 ， 并 人 允许 通过 对 象 来 存 取 这 些 数据 的 值 。 


5.1.1 什么 是 对 象 


对 象 的 概念 首先 来 自 于 对 客观 世界 的 认识 ， 它 用 于 描述 客观 世界 存在 的 特定 实体 。 例 如 ,“ 人 ”就 
是 一 个 典型 的 对 象 ,“ 人 ”包括 身高 、 体 重 等 特性 ， 同 时 又 包含 吃饭 、 睡 觉 等 动作 。“ 人 ”对 象 示意 图 
如 图 5.1 所 示 。 

在 计算 机 的 世界 里 ， 不 仅 存在 来 自 于 客观 世界 的 对 象 ， 也 包含 为 解决 问题 而 引入 的 比较 抽象 的 对 
象 。 例 如 ， 一 个 用 户 可 以 被 看 作 一 个 对 象 ， 它 包含 用 户 名 、 用 户 密码 等 特性 ， 也 包含 注册 、 登 录 等 动 
作 。 其 中 ， 用 户 名 和 用 户 密码 等 特性 ， 可 以 用 变量 来 描述 ， 而 注册 、 登 录 等 动作 ， 可 以 用 函数 来 定义 。 
因此 ， 对 象 实 际 上 就 是 一 些 变量 和 函数 的 集合 。“ 用 户 ” 对 象 示意 图 如 图 5.2 所 示 。 


图 5.1 “人 ”对 象 


5.1.2 对象 的 属性 和 方法 


在 JavaScript 中 ， 对 象 包含 两 个 要 素 : 属性 和 方法 。 通 过 访问 或 设置 对 象 的 属性 ， 并 且 调 用 对 象 的 
方法 ， 就 可 以 对 对 象 进行 各 种 操作 ， 从 而 实现 需要 的 功能 。 


1. 对 象 的 属性 


包含 在 对 象 内 部 的 变量 称 为 对 象 的 属性 ， 它 是 用 来 描述 对 象 特性 的 一 组 数据 。 
在 程序 中 使 用 对 象 的 一 个 属性 类 似 于 使 用 一 个 变量 ， 就 是 在 属性 名 前 加 上 对 象 名 和 一 个 句点 “.”。 
获取 或 设置 对 象 的 属性 值 的 语法 格式 如 下 : 


对 象 名 .属性 名 


JavaScript 从 入 门 到 精通 ( 微 视频 精 编 版 ) 


以 “用 户 ” 对 象 为 例 ， 该 对 象 有 用 户 名 和 密码 两 个 属性 ， 以 下 代码 可 以 分 别 获取 该 对 象 的 这 两 个 
属性 值 : 

var name = 用 户 .用 户 名 ; 

var pwd = 用 户 .密码 ; 

也 可 以 通过 以 下 代码 来 设置 “用户” 对 象 的 这 两 个 属性 值 。 


用 户 .用 户 名 = "mr"; 
用 户 .密码 = "mrsoft"; 


2. 对 象 的 方法 

包含 在 对 象 内 部 的 函数 称 为 对 象 的 方法 ， 它 可 以 用 来 实现 某 个 功能 。 

在 程序 中 调用 对 象 的 一 个 方法 类 似 于 调用 一 个 函数 ， 就 是 在 方法 名 前 加 上 对 象 名 和 一 个 句点 “.”， 
语法 格式 如 下 : 

对 象 名 .方法 名 (参数 ) 

与 函数 一 样 ， 在 对 象 的 方法 中 可 以 使 用 一 个 或 多 个 参数 ， 也 可 不 使 用 参数 ， 同 样 以 “用 户 ” 对 象 
为 例 ， 该 对 象 有 注册 和 登录 两 个 方法 ， 以 下 代码 可 以 分 别 调用 该 对 象 的 这 两 个 方法 : 

用 户 .注册 (); 

用 户 .登录 (); 
Ne 入 

在 JavaScript 中 ， 对 象 就 是 属性 和 方法 的 集合 ， 这 些 属性 和 方法 也 叫 作 对 象 的 成 员 。 方 法 是 作 

为 对 象 成 员 的 函数 ， 表 明 对 象 所 具有 的 行为 ; 而 属性 是 作为 对 象 成 员 的 变量 ， 表 明 对 象 的 状态 。 | 


5.1.3 JavaScript 对 象 的 种 类 


在 JavaScript 中 可 以 使 用 3 种 对 象 ， 即 自 定义 对 象 、 内 置 对 象 和 浏览 器 对 象 。 内 置 对 象 和 浏览 器 对 

在 JavaScript 中 将 一 些 常用 的 功能 预先 定义 成 对 象 , 这 些 对 象 用 户 可 以 直接 使 用 , 这 种 对 象 就 是 内 
置 对 象 。 内 置 对 象 可 以 帮助 用 户 在 编写 程序 时 实现 一 些 最 常用 、 最 基本 的 功能 , 例如 Math、Date 、String、 
Array、Number、Boolean、Global、Object 和 RegExp 对 象 等 。 

浏览 器 对 象 是 浏览 器 根据 系统 当前 的 配置 和 所 装载 的 页 面 为 JavaScript 提供 的 一 些 对 象 。 例 如 
document、window 对 象 等 。 

自 定 义 对 象 就 是 指 用 户 根据 需要 自己 定义 的 新 对 象 。 


S.2 自 定 义 对 象 的 创建 


创建 自 定义 对 象 主要 有 3 种 方法 : 一 种 是 直接 创建 自 定义 对 象 ， 另 一 种 是 通过 自 定义 构造 函数 来 
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创建 ， 还 有 一 种 是 通过 系统 内 置 的 Object 对 象 创建 。 
5.2.1 ”直接 创建 自 定义 对 象 


直接 创建 自 定义 对 象 的 语法 格式 如 下 : 

var 对 象 名 = {属性 名 1: 属 性 值 1, 属 性 名 2: 属 性 值 2, 属 性 名 3: 属 性 值 3...} 

由 语法 格式 可 以 看 出 ， 直 接 创建 自 定义 对 象 时 ， 所 有 属性 都 放 在 大 括号 中 ， 属 性 之 间 用 逗号 分 隔 ， 
每 个 属性 都 由 属性 名 和 属性 值 两 部 分 组 成 ， 属 性 名 和 属性 值 之 间 用 冒号 隔 开 。 

例如 ， 创 建 一 个 学 生 对 象 sudent， 并 设置 3 个 属性 ， 分 别 为 name、sex 和 age， 然 后 输出 这 3 个 属 
性 的 值 ， 代 码 如 下 : 


01 varstudent={ /创建 student 对 象 
02 name:" 张 三 "， 

03 sex:" 男 "， 

04 age:25 

05 } 

06 ”document.write(" 姓 名 : "+student.name+"<br>"); /| 输出 name 属性 值 
07 ”document.write(" 性 别 : "+student.sex+"<br>"); // 输 出 sex 属性 值 
08 ”document.write(" 年 龄 : "+student.age+"<br>"); /| 输出 age 属性 值 


运行 结果 如 图 5.3 所 示 。 


图 5.3 ”创建 学 生 对 象 并 输出 属性 值 
男 外， 还 可 以 使 用 数组 的 方式 对 属性 值 进行 输出 ， 代 码 如 下 : 


01 varstudent={ /创建 student 对 象 
02 name:" 张 三 "， 

03 sex:" 男 "， 

04 age:25 

05 } 

06 ”document.write(" 姓 名 : "+student[name']+"<br>"); /| 输出 name 属性 值 
07 ”document.write(" 性 别 : "+student['sex]+"<br>"); /| 输出 sex 属性 值 
08 document.write(" 年 龄 : "+student[age'”]+"<br>"); // 输 出 age 属性 值 


5.2.2 通过 自 定义 构造 函数 创建 对 象 
虽然 直接 创建 自 定义 对 象 很 方便 也 很 直观 ， 但 是 如 果 要 创建 多 个 相同 的 对 象 ， 使 用 这 种 方法 就 很 
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人 烦琐。 在 JavaScript 中 可 以 自 定义 构造 函数 , 通过 调用 自 定义 的 构造 函数 可 以 创建 并 初始 化 一 个 新 的 对 

象 。 与 普通 函数 不 同 ， 调 用 构造 函数 必须 要 使 用 new 运算 符 。 构 造 函 数 也 可 以 和 普通 函数 一 样 使 用 参 

数 ， 其 参数 通常 用 于 初始 化 新 对 象 。 在 构造 函数 的 函数 体内 通过 this 关键 字 初 始 化 对 象 的 属性 与 方法 。 
例如 ， 要 创建 一 个 学 生 对 象 sudent， 可 以 定义 一 个 名 称 为 Student 的 构造 函数 ， 代 码 如 下 : 


01 function Student(name,sex,age}{ /定义 构造 函数 

02 this.name = name; 1/ 初始 化 对 象 的 name 属性 
03 this.sex = sex; 1/ 初始 化 对 象 的 sex 属性 
04 this.age = age; /初始 化 对 象 的 age 属性 
05 } 


上 述 代码 中 ， 在 构造 函数 内 部 对 name、sex 和 age 3 个 属性 进行 了 初始 化 ， 其 中 ，this 关键 字 表示 
对 对 象 自己 属性 、 方 法 的 引用 。 

利用 该 函数 ， 可 以 用 new 运算 符 创建 一 个 新 对 象 ， 代 码 如 下 : 

var student1 = new Student(" 张 三 "," 男 ",25); /创建 对 象 实例 


上 述 代码 创建 了 一 个 名 为 studentl 的 新 对 象 ， 新 对 象 studentl 称 为 对 象 student 的 实例 。 使 用 new 
运算 符 创 建 一 个 对 象 实例 后 ，JavaScript 会 接着 自动 调用 所 使 用 的 构造 函数 ， 执 行 构造 函数 中 的 程序 。 
另外 ， 还 可 以 创建 多 个 student 对 象 的 实例 ， 每 个 实例 都 是 独立 的 。 代 码 如 下 : 


01 var student2 = new Student(" 李 四 "," 女 ",23); /创建 其 他 对 象 实例 
02 ， var student3 = new Student(" 王 五 "" 男 "28); /创建 其 他 对 象 实例 


【 例 5.01】 应 用 构造 函数 创建 一 个 球员 对 象 ， 定 义 构造 函数 Player0， 在 函数 中 应 用 this 关键 字 
初始 化 对 象 中 的 属性 ， 然 后 创建 一 个 对 象 实例 ， 最 后 输出 对 象 中 的 属性 值 ， 即 输出 球员 的 身高 、 体 重 、 
运动 项 目 、 所 属 球 队 和 专业 特点 。 程 序 代码 如 下 : ( 实例 位 置 : 资源 包 \ 源 码 \0S\S.01 ) 

01 <h1 style="font-size:24px;"> 梅 西 </h1> 


02 <scripttype="text/javascript"> 
03 function Player(height,weight,sportteam,characterj{ 


04 this.height = height; /对 象 的 height 属性 
05 this.weight = weight; 1/ 对象 的 weight 属性 
06 this.sport = sport; 1/ 对象 的 sport 属性 

07 this.team = team:; // 对 象 的 team 属性 

08 this.character = character; // 对 象 的 character 属性 
09 


. 
10 /创建 一 个 新 对 象 player1 
11 “var player1 = new Player("170cm","67kg"," 足 球 "," 巴 塞 罗 那 "," 技 术 出 色 ， 意 识 好 "); 
12 ”document.write(" 球 员 身 高 : "+player1.height+"<br>"); 。“// 输 出 height 属性 值 
13 ”document.write(" 球 员 体 重 : "+player1.weight+"<br>"); /输出 weight 属性 值 
14 ”document.write(" 运 动 项 目 : "+player1.sport+"<br>"); /| 输出 sport 属性 值 
15 ”document.write(" 所 属 球 队 : "+player1.team+"<br>"); // 输 出 team 属性 值 
16 ”document.write(" 专 业 特 点 :"+player1.character+"<br>"); // 输 出 character 属性 值 
17 </script> 


行 结果 如 图 5.4 所 示 。 


[ci 
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图 5.4 输出 球员 对 象 的 属性 值 
对 象 不 但 可 以 拥有 属性 ， 还 可 以 拥有 方法 。 在 定义 构造 函数 时 ， 也 可 以 定义 对 象 的 方法 。 与 对 象 
的 属性 一 样 ， 在 构造 函数 中 也 需要 使 用 this 关键 字 来 初始 化 对 象 的 方法 。 例 如 ， 在 student 对 象 中 定义 
3 个 方法 showName0、showAge0 和 showSex0， 代 码 如 下 : 


01 function Student(name,sex,agej{ /定义 构造 函数 

02 this.name = name; /初始化 对 象 的 属性 

03 this.sex = sex; /初始 化 对 象 的 属性 

04 this.age = age; 1/ 初始 化 对 象 的 属性 

05 this.showName = showName; /初始 化 对 象 的 方法 

06 this.showSex = showSex; /初始 化 对 象 的 方法 

07 this.showAge = showAge:; /初始 化 对 象 的 方法 

08 } 

09 function showName(){ /定义 showName() 方 法 

10 alert(this.name); /| 输出 name 属性 值 

11 } 

12 function showSex(){ /定义 showSex() 方 法 

13 alert(this.sex); /| 输出 sex 属性 值 

14 } 

15 function showAge()f /定义 showAge() 方 法 

16 alert(this.age); /| 输出 age 属性 值 

va | 

另外 ， 也 可 以 在 构造 函数 中 直接 使 用 表达 式 来 定义 方法 ， 代 码 如 下 : 

01 function Student(name,sex,age}{ /定义 构造 函数 

02 this.name = name; /初始 化 对 象 的 属性 

03 this.sex = sex; /初始 化 对 象 的 属性 

04 this.age = age; 1/ 初始 化 对 象 的 属性 

05 this.showName=function(}{ /应 用 表达 式 定 义 showName() 方 法 
06 alert(this.name); /| 输出 name 属性 值 

07 js 

08 this.showSex=function(X{ /应 用 表达 式 定义 showSex() 方 法 
09 alert(this.sex); /| 输出 sex 属性 值 

10 下 

11 this.showAge=function()f{ /应 用 表达 式 定义 showAge() 方 法 
2 alert(this.age); /输出 age 属性 值 
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Te 
14 } 


【 例 5.02】 应 用 构造 函数 创建 一 个 演员 对 象 Actor, 在 构造 函数 中 定义 对 象 的 属性 和 方法 , 通过 


创建 的 对 象 实例 调用 对 象 中 的 方法 ， 输 出 演员 的 中 文 名 、 代 表 作 品 以 及 主要 成 就 。 程 序 代码 如 下 : ( 实 
例 位 置 : 资源 包 \ 源 码 \05\5.02 ) 


01 function Actor(name,work,achievementX{ 


02 this.name = name; // 对 象 的 name 属性 

03 this.work = work:; // 对 象 的 work 属性 

04 this.achievement = achievement /| 对象 的 achievement 属性 
05 this.introduction = function(){ /定义 introduction() 方 法 
06 document.write(" 中 文 名 : "+this.name); // 输 出 name 属性 值 

07 document.write("<br> 代 表 作品 : "+this.work); /输出 work 属性 值 

08 document.write("<br> 主 要 成 就 : "+this.achievement);  // 输 出 achievement 属性 值 
09 } 

10 } 


11 ”var Actor1 = new Actor(" 威 尔 . 史密斯 "" 《独立 日 》、《 黑 衣 人 》"， 
"奥斯卡 金 像 奖 最 佳 男 主角 提名 "); // 创 建 对 象 Actor1 
12 ”Actor1.introduction(); /调用 introduction() 方 法 


运行 结果 如 图 5.5 所 示 。 
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图 5.5 调用 对 象 中 的 方法 输出 演员 简介 
调用 构造 函数 创建 对 象 需要 注意 一 个 问题 。 如 果 构 造 函 数 中 定义 了 多 个 属性 和 方法 ， 那 么 在 每 次 


创建 对 象 实例 时 都 会 为 该 对 象 分 配 相同 的 属性 和 方法 ， 这 样 会 增加 对 内 存 的 需求 ， 这 时 可 以 通过 
prototype 属性 来 解决 这 个 问题 。 


prototype 属性 是 JavaScript 中 所 有 函数 都 有 的 一 个 属性 。 该 属性 可 以 向 对 象 中 添加 属性 或 方法 。 
语法 如 下 : 
object.prototype.name=value 


参数 说 明 。 

object: 构造 函数 名 。 

回 name: 要 添加 的 属性 名 或 方法 名 。 

value: 添加 属性 的 值 或 执行 方法 的 函数 。 

例如 , 在 student 对 象 中 应 用 prototype 属性 向 对 象 中 添加 一 个 show0 方 法 , 通过 调用 show0 方 法 输 


出 对 象 中 3 个 属性 的 值 。 代 码 如 下 : 
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01 function Student(name,sex,age}{ /定义 构造 函数 

02 this.name = name; /初始 化 对 象 的 属性 

03 this.sex = sex; /初始 化 对 象 的 属性 

04 this.age = age; 1/ 初始化 对 象 的 属性 

05 } 

06 Student.prototype.show=function(}{ /1 添加 show() 方 法 

07 alert(" 姓 名 : "+this.name+"n 性 别 : "+this.sex+"\n 年 龄 : "+this.age); 

08 } 

09 var student1=new Student(" 张 三 "," 男 ",25); // 创 建 对 象 实例 

10 student1.show(); // 调 用 对 象 的 show() 方 法 


运行 结果 如 图 5.6 所 示 。 
【 例 5.03】 应 用 构造 函数 创建 一 个 圆 的 对 象 Circle， 定 义 构造 函数 Circle0， 然 后 应 用 prototype 
属性 向 对 象 中 添加 属性 和 方法 ， 通 过 调用 方法 实现 计算 圆 的 周 长 和 面积 的 功能 。 程 序 代 码 如 下 :( 实例 
位 置 : 资源 包 \ 源 码 \05\5.03 ) 


01 function Circle(r}{ 


02 this.r=r; // 设 置 对 象 的 r 属 性 

03 } 

04 Circle.prototype.pi=3.14; /添加 对 象 的 pi 属性 

05 ”Circle.prototype.circumference=function(){ /添加 计算 圆周 长 的 circumference() 方 法 
06 return 2*this.pi*this.r; // 返 回 圆 的 周 长 

07 } 

08 Circle.prototype.area=function(}{ /添加 计算 圆 面积 的 area() 方 法 
09 return this.pi*this.r*this.r; // 返 回 圆 的 面积 

10 } 

11 var c=new Circle(10); // 创 建 一 个 新 对 象 

12 ”document.write(" 圆 的 半径 为 "+c.r+"<br>"); // 输 出 圆 的 半径 

13 document.write(" 圆 的 周 长 为 "+parselnt(c.circumference())+"<br>");”// 输 出 圆 的 周 长 

14 ”document.write(" 圆 的 面积 为 "+parselnt(c.area())); // 输 出 圆 的 面积 

运 


行 结果 如 图 5.7 所 示 。 
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图 5.6 输出 3 个 属性 值 图 5.7 计算 圆 的 周 长 和 面积 
5.2.3 通过 Object 对 象 创建 自 定义 对 象 


Object 对 象 是 JavaScript 中 的 内 部 对 象 ， 它 提供 了 对 象 的 最 基本 功能 ， 这 些 功 能 构成 了 所 有 其 他 对 
象 的 基础 。Object 对 象 提供 了 创建 自 定义 对 象 的 简单 方式 ， 使 用 这 种 方式 不 需要 再 定义 构造 函数 。 可 
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创建 Object 对 象 的 语法 如 下 : 


obj = new Object([value]) 


参数 说 明 。 


加 


obj: 必 选 项 。 要 赋值 为 Object 对 象 的 变量 名 。 


以 在 程序 运行 时 为 JavaScript 对 象 随意 添加 属性 ， 因 此 使 用 Object 对 象 能 很 容易 地 创建 自 定义 对 象 。 


回 value: 可 选项 。 任 意 一 种 基本 数据 类 型 (Number、Boolean 或 Sting)。 如 果 value 为 一 个 对 
象 ， 返 回 不 做 改动 的 该 对 象 。 如 果 value 为 null、undefined， 或 者 没有 给 出 ， 则 产生 没有 内 容 


的 对 象 。 


使 用 Object 对 象 可 以 创建 一 个 没有 任何 属性 的 空 对 象 。 如 果 要 设置 对 象 的 属性 ， 只 需要 将 一 个 值 


赋 给 对 象 的 新 属性 


后 对 属性 值 进行 输出 ， 代 码 如 下 : 


01 
02 
03 
04 
05 
06 
07 


var student = new Object(); 
student.name = " 王 五 "; 
student.sex = " 男 "; 
student.age = 28; 


document.write(" 姓 名 : "+student.name+"<br>"); 


document.write(" 性 别 : "+student.sex+"<br>"); 
document.write(" 年 龄 : "+student.age+"<br>"); 


运行 结果 如 图 5.8 所 示 。 


E 即 可 。 例 如 ， 使 用 Object 对 象 创建 一 个 自 定义 对 象 student， 并 设置 对 象 的 属性 ， 然 


// 创 建 一 个 空 对 象 

// 设 置 对 象 的 name 属性 

1/ 设置 对 象 的 sex 属性 

// 设 置 对 象 的 age 属性 

// 输 出 对 象 的 name 属性 值 
// 输 出 对 象 的 sex 属性 值 
// 输 出 对 象 的 age 属性 值 
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= 


5.8 创建 Object 对 象 并 输出 属性 值 


SS 


一 旦 通过 给 属性 赋值 创建 了 该 属性 ， 就 可 以 在 任何 时 候 修 改 这 个 属性 的 值 ， 只 需要 赋 给 它 新 值 


即 可 。 


在 使 用 Object 对 象 创建 自 定义 对 象 时 ， 也 可 以 定义 对 象 的 方法 。 例如， 在 student 对 象 中 定义 方法 


show0O， 


然后 对 方法 进行 调用 ， 代 码 如 下 : 


var student = new Object(); 

student.name = " 张 三 "; 

student.sex = " 男 "; 

student.age = 25; 

student.show = function(){ 
/| 输出 属性 的 值 


// 创 建 一 个 空 对 象 

// 设 置 对 象 的 name 属性 
1/ 设置 对 象 的 sex 属性 
/设置 对 象 的 age 属性 
/定义 对 象 的 方法 


alert(" 姓 名 : "+studentname+"m 性 别 : "+student.sex+"\n 年 龄 : "+student.age); 
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08 上 

09 student.show(); // 调 用 对 象 的 方法 

运行 结果 如 图 5.9 所 示 。 

如 果 在 创建 Object 对 象 时 没有 指定 参数 ，JavaScript 将 会 创建 一 个 Object 实例 ， 但 该 实例 并 没有 具 
体 指定 为 哪 种 对 象 类 型 ， 这 种 方法 多 用 于 创建 一 个 自 定义 对 象 。 如 果 在 创建 Object 对 象 时 指定 了 参数 ， 
可 以 直接 将 value 参数 的 值 转换 为 相应 的 对 象 。 如 以 下 代码 就 是 通过 Object 对 象 创建 了 一 个 字符 串 对 象 。 

var myObj = new Object(" 你 好 JavaScript"); /创建 一 个 字符 串 对 象 

【 例 5.04】 使 用 Object 对 象 创建 自 定义 对 象 book， 在 book 对 象 中 定义 方法 getBookmfo0， 在 


方法 中 传递 3 个 参数 ， 然 后 对 这 个 方法 进行 调用 ， 输 出 图 书信 息 。 程 序 代 码 如 下 : ( 实例 位 置 : 资源 包 \ 
源码 \05\5.04 ) 

01 var book = new Object(); /创建 一 个 空 对 象 

02 “book.getBooklnfo = getBookInfo; /定义 对 象 的 方法 

03 function getBooklnfo(name,type,price){ 


04 // 输 出 图 书 的 书 名 、 类 型 及 价格 
05 document.write(" 书 名 : "+name+"<br> 类 型 : "+type+"<br> 价 格 : "+price); 


} 
07 ”book.getBookInfo("JavaScript 入 门 经 典 ","JavaScript","80"); /调用 对 象 的 方法 
运行 结果 如 图 5.10 所 示 。 


图 5.9 调用 对 象 的 方法 图 5.10 创建 图 书 对 象 并 调用 对 象 中 的 方法 


5.3 对象 访 问 语 向 
在 JavaScript 中 ，for...in 语句 和 with 语句 都 是 专门 应 用 于 对 象 的 语句 。 下 面 对 这 两 个 语句 分 别 进 
行 介绍 。 
5.3.1 for...in 语句 
for...in 语句 和 for 语句 十 分 相似 ，for...in 语句 用 来 遍历 对 象 的 每 一 个 属性 。 每 次 都 将 属性 名 作为 


字符 串 保 存在 变量 中 。 
语法 如 下 : 
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for (变量 in 对 象 ) { 
语句 


参数 说 明 。 

回 ”变量 : 用 于 存储 某 个 对 象 的 所 有 属性 名 。 

回 对象 , 用 于 指定 要 遍历 属性 的 对 象 。 

回 ”语句 : 用 于 指定 循环 体 。 

for…in 语句 用 于 对 某 个 对 象 的 所 有 属性 进行 循环 操作 。 将 某 个 对 象 的 所 有 属性 名 称 依次 赋值 给 同 
一 个 变量 ， 而 不 需要 事先 知道 对 象 属性 的 个 数 。 


应 用 for… 训 语句 遍历 对 象 的 属性 ， 在 输出 属性 值 时 一 定 要 使 用 数组 的 形式 〈 对 和 象 名 [属性 名 ] ) 
进行 输出 ， 而 不 能 使 用 “对 象 名 .属性 名 ”这 种 形式 。 -| 
下 面 应 用 for.…in 循环 语句 输出 对 象 中 的 属性 名 和 值 。 首 先 创建 一 个 对 象 ， 并 且 指 定 对 象 的 属性 ， 
然后 应 用 for.…in 循环 语句 输出 对 象 的 所 有 属性 和 值 。 程 序 代码 如 下 : 
Var object=fuser" 小 月 ,sex-" 女 "age:23,interest'" 运 动 、 唱 歌 让 // 创 建 自 定义 对 象 
for (var example in object){ /应 用 for...in 循环 语句 


01 
02 
03 document.write ("属性 : "+example+"="+object[example]+"<br>");  // 输 出 各 属性 名 及 属性 值 
Eh 


运行 结果 如 图 5.11 所 示 。 
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5.11 输出 对 象 中 的 属性 名 及 属性 值 


5.3.2 ”with 语句 


with 语句 用 于 在 访问 一 个 对 象 的 属性 或 方法 时 避免 重复 引用 指定 对 象 名 。 使 用 with 语句 可 以 简化 
对 象 属性 调用 的 层次 。 
语法 如 下 : 
With( 对 象 名 称 X( 
语句 
) 


参数 说 明 。 
对 象 名 称 : 用 于 指定 要 操作 的 对 象 名 称 。 
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回 ”语句 : 要 执行 的 语句 ， 可 直接 引用 对 象 的 属性 名 或 方法 名 。 

在 一 个 连续 的 程序 代码 中 ， 如 果 多 次 使 用 某 个 对 象 的 多 个 属性 或 方法 ， 那 么 只 要 在 with 关键 字 后 
的 括号 0 中 写 出 该 对 象 实例 的 名 称 , 就 可 以 在 随后 的 大 括号 的 程序 语句 中 直接 引用 该 对 象 的 属性 名 或 
方法 名 ， 不 必 再 在 每 个 属性 名 或 方法 名 前 都 加 上 对 象 实例 名 和 “.”。 

例如 ， 应 用 with 语句 实现 student 对 象 的 多 次 引用 ， 代 码 如 下 : 


01 function Student(name,sex,age\{ 

02 this.name = name; // 设 置 对 象 的 name 属性 
03 this.sex = sex; /设置 对 象 的 sex 属性 
04 this.age = age; /设置 对 象 的 age 属性 
05 } 

06 ”var student=new Student(" 周 星星 "," 男 ",26); // 创 建新 对 象 

07 with(student}{ // 应 用 with 语句 

08 alert(" 姓 名 :"+name+"n 性 别 :"+sex+"\n 年 龄 : "+age);”// 输 出 多 个 属性 的 值 

09 } 


运行 结果 如 图 5.12 所 示 。 


图 5.12 ”with 语句 的 应 用 
5.4 实 战 


5.4.1 应 用 自 定义 对 象 的 方法 统计 考试 分 数 


定义 一 个 学 生 对 象 student， 在 对 象 中 定义 统计 考试 分 数 的 方法 ， 运 行 结果 如 图 5.13 所 示 。( 实例 
位 置 : 资源 包 \ 源 码 \05\ 实 战 \01 ) 


图 5.13 统计 考试 分 数 


各 
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5.4.2 通过 自 定义 对 象 生成 指定 行 数 和 列 数 的 表格 


应 用 构造 函数 创建 一 个 自 定义 对 象 ， 通 过 自 定 义 对 象 生成 指定 行 数 、 列 数 的 表格 ， 运 行 结果 如 
图 5.14 所 示 。( 实例 位 置 : 资源 包 \ 源 码 \0S\ 实 战 \02 ) 
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本 生成 指定 行 数 、 列 数 的 表格 | 
5.4.3 使 用 Object 对 象 创建 一 个 球 的 对 象 


使 用 Object 对 象 创建 一 个 球 的 对 象 Ball， 通 过 调用 对 象 中 的 方法 输出 球 的 类 型 、 颜 色 和 价格 ， 运 
行 结果 如 图 5.15 所 示 。( 实例 位 置 : 资源 包 \ 源 码 \05\ 实 战 \03 ) 


55. 小 结 


本 章 主 要 讲解 了 自 定义 对 象 的 创建 ， 以 及 两 种 访问 对 象 的 语句 。 通 过 本 章 的 学 习 ， 读 者 可 以 了 解 
对 象 的 创建 以 及 对 象 属性 和 方法 的 使 用 。 


ep 
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常用 内 部 对 象 
(名 视频 讲解 ， 58 分 钟 ) 


JavaScript 的 内 部 对 象 也 称 为 内 置 对 象 ， 它 将 一 些 常用 功能 预先 定义 成 对 象 ， 
用 户 可 以 直接 使 用 ， 这 些 内 部 对 象 可 以 帮助 用 户 实现 一 些 最 常用 、 最 基本 的 功能 。 

JavaScript 中 的 内 部 对 象 按 照 使 用 方式 分 为 动态 对 象 和 静态 对 象 。 在 引用 动态 
对 象 的 属性 和 方法 时 ， 必 须 使 用 new 关键 字 来 创建 一 个 对 象 实 例 ， 然 后 才能 使 用 
“对 象 实例 名 .成 员 ” 的 方式 来 访问 其 属性 和 方法 ， 如 Date 对 象 ; 引用 静态 对 象 的 
属性 和 方法 时 ， 不 需要 用 new 关键 字 创 建 对 象 实例 ， 直 接 使 用 “对 象 名 .成 员 ” 的 
方式 来 访问 其 属性 和 方法 , 如 数学 对 象 Math。 下 面 对 JavaScript 中 的 Math 对 象 以 
及 Date 对 象 进行 详细 介绍 。 

通过 学 习 本 章 ， 读 者 主要 享 担 以 下 内 容 : 


”Math 对 象 的 使 用 
由 Date 对 象 的 使 用 
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6.1 Math 对 象 


人 

Math 对 象 提供 了 大 量 的 数学 常量 和 数学 函数 。 在 使 用 Math 对 象 时 ， 不 能 使 用 new 关键 字 创 建 对 
象 实例 ， 而 应 直接 使 用 “对 象 名 .成 员 ” 的 格式 来 访问 其 属性 或 方法 。 下 面 将 对 Math 对 象 的 属性 和 方 
法 进行 介绍 。 


6.1.1 ”Math 对象 的 属性 


Math 对 象 的 属性 是 数学 中 常用 的 常量 ， 如 表 6.1 所 示 。 


表 6.1 Math 对 象 的 属性 


| 描 述 | 属 性 | 描述 

以 2 为 底数 的 e 的 对 数 (1.4426950408889633) 
以 10 为 底数 的 e 的 对 数 (0.4342944819032518) 
| 10 的 自然 对 数 (2.3025850994046) 。 | PI | 圆周率 (3.141592653589793) 

0.5 的 平方 根 〈0.7071067811865476) 


例如 ， 已 知 一 个 圆 的 半径 是 5， 计 算 这 个 圆 的 周 长 和 面积 。 代 码 如 下 : 


01 varr=5; /定义 圆 的 半径 
02 var circumference = 2*Math.Ph*r; /定义 圆 的 周 长 
03 var area = Math.Plrr /定义 圆 的 面积 
04 ”document.write(" 圆 的 半径 为 "+r+"<br>"); // 输 出 圆 的 半径 
05 ”document.write(" 圆 的 周 长 为 "+parselnt(circumference)+"<br>"); // 输 出 圆 的 周 长 
06 ”document.write(" 圆 的 面积 为 "+parselnt(area)); // 输 出 圆 的 面积 
运行 结果 为 : 

圆 的 半径 为 5 

圆 的 周 长 为 31 

圆 的 面积 为 78 


6.1.2 Math 对 象 的 方法 


Math 对 象 的 方法 是 数学 中 常用 的 函数 ， 如 表 6.2 所 示 。 
表 6.2 Math 对 象 的 方法 


方 法 描述 示例 
abs(x) | 返回 x 的 绝对 什 Math abs(-10): // 返 回 值 为 10 
acos(x) | 返回 x 弧度 的 反 余弦 值 Math acos(1): // 返 回 值 为 0 


asin(x) 返回 x 弧度 的 反正 弦 值 // 返 回 值 为 1.5707963267948965 


Math.asin(1): 
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续 表 
方 ” 法 描述 示例 
atan(x) 返回 x 弧度 的 反正 切 值 Math.atan(1); // 返 回 值 为 0.7853981633974483 
atan2(x,y) i x 轴 到 点 Quy) 的 角度 ， 其 伯 在 -PI 与 Math atan2(10.5): 。“// 返 回 值 为 1.1071487177940904 
Math.ceil(1.05); // 返 回 值 为 2 
ceil(x) 返回 大 于 或 等 于 x 的 最 小 整数 Madi eel -1.05). /返回 值 为 -1 
Cos(x) 返回 x 的 余弦 值 Math.cos(0): // 返 回 值 为 1 
exp(x) 返回 e 的 x 乘 方 Math exp(4): // 返 回 值 为 54.598150033144236 
Math .floor(1.05) 。“”// 返 回 值 为 1 
floor(x) 返回 小 于 或 等 于 x 的 最 大 整数 Math floor(-1.05)。 /返回 值 为 -2 
log(x) 返回 x 的 自然 对 数 Math.log(1); // 返 回 值 为 0 
max(n1.n2...) | 返回 参数 列表 中 的 最 大 值 Math max(2.4): // 返 回 值 为 4 
min(nl.n2...) | 返回 参数 列表 中 的 最 小 值 Math min(2.4): // 返 回 值 为 2 
pow(x.y) 返回 x 对 y 的 次 方 Math pow(2.4): // 返 回 值 为 16 
1 返回 0 和 1 之 间 的 随机 数 Math random0:/ 返 回 值 为 类 似 0.8867056997839715 的 
随机 数 
Math round(1.05): /返回 值 为 1 
round(x) 返回 最 接近 x 的 整数 ， 即 四 舍 五 入 函数 Mathround(-1.05): // 返 回信 为 -1 
sin(x) 返回 x 的 正弦 值 Math.sin(0): // 返 回 值 为 0 
qrt(x) 返回 x 的 平方 根 Math.sqrt(2): // 返 回 值 为 1.4142135623730951 
tan(x) 返回 x 的 正切 值 Math.tan(90): // 返 回 值 为 -1.995200412208242 


例如 ， 计 算 两 个 数值 中 的 较 大 值 ， 可 以 通过 Math 对 象 的 max0 函 数 。 代 码 如 下 : 
// 获 取 变 量 value1 和 value2 的 最 大 值 


var larger = Math.max(value1,value2); 
或 者 计算 一 个 数 的 10 次 方 ， 代 码 如 下 : 
var result = Math.pow(value1,10); 


var result = Math.round(value); 


【 例 6.01】 


位 置 : 资源 包 \ 源 码 \06\6.01 ) 


(1) 在 页 面 中 创建 表单 ， 在 表单 


代码 如 下 : 


01 
02 
03 
04 
05 


请 输入 要 生成 随机 数 的 位 数 : <p> 
<form name="form"> 
<input type="text" name="digit" /> 
<input type="button" value=" 生 成 " /> 
</form> 


// 获 取 变 量 value1 的 10 次 方 
或 者 使 用 四 舍 五 入 函数 计算 最 相近 的 整数 值 ， 代 码 如 下 : 
// 对 变量 value 的 值 进 行 四 舍 五 入 


应 用 Math 对 象 中 的 方法 实现 生成 指定 位 数 的 随机 数 的 功能 。 实 现 步骤 如 下 : ( 实例 


添加 一 个 用 于 输入 随机 数位 数 的 文本 框 和 一 个 “生成 ”按钮 ， 
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(2) 编写 生成 指定 位 数 的 随机 数 的 函数 ran0， 该 函数 只 有 一 个 参数 digit， 用 于 指定 生成 的 随机 


数 的 位 数 ， 代 码 如 下 : 


01 function ran(digiti{ 


02 var result="™"; /声明 变 量 并 初始 化 

03 for(i=0;i<digit;i++X{ 

04 result=result+(Math.floor(Math.random()*10)); // 将 生成 的 单个 随机 数 连接 起 来 
05 

06 alert(result); /| 输出 随机 数 

Th 


(3) 在 “生成 ”按钮 的 onClick 事件 中 调用 ran0 函 数 生成 随机 数 ， 代 码 如 下 : 
<input type="button" value=" 生 成 " onclick="ran(form.digit.value)" /> 
运行 程序 ， 结 果 如 图 6.1 所 示 。 


图 6.1 生成 指定 位 数 的 随机 数 


6.2 Date 对 象 


在 Web 开发 过 程 中 ， 可 以 使 用 JavaScript 的 Date 对 象 〈 日 期 对 象 ) 来 实现 对 日 期 和 时 间 的 控制 。 


如 果 想 在 网 页 中 显示 计时 时 钟 ， 就 得 重复 生成 新 的 Date 对 象 来 获取 当前 计算 机 的 时 间 。 用 户 可 以 使 用 
Date 对 象 执行 各 种 使 用 日 期 和 时 间 的 过 程 。 


6.2.1 创建 Date 对 象 


> 


日 期 对 象 是 对 一 个 对 象 数据 类 型 求 值 ， 该 对 象 主要 负责 处 理 与 日 期 和 时 间 有 关 的 数据 信息 。 在 使 


Date 对 象 前 ， 首 先 要 创建 该 对 象 ， 其 创建 格式 如 下 : 


dateObj = new Date() 
dateObj = new Date(dateVal) 
dateObj = new Date(year, month, date[, hours[, minutes[, seconds[,ms]]]]) 


Date 对 象 语法 中 各 参数 的 说 明 如 表 6.3 所 示 。 
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表 6.3 Date 对 象 的 参数 说 明 


必 选 项 。 要 赋值 为 Date 对 象 的 变量 名 


必 选 项 。 如 果 是 数字 值 ，dateVal 表示 指定 日 期 与 1970 年 1 月 1 日 午夜 间 全 球 标准 时 间 的 毫秒 数 。 如 果 
是 字符 串 ， 常 用 的 格式 为 “月 日 年 小 时 :分 钟 : 秒 ”， 其 中 月 份 用 英文 表示 ， 其 余 用 数字 表示 ， 时 间 部 
分 可 以 省 略 ， 另 外 ， 还 可 以 使 用 “年 /月 /日 小 时 :分 钟 : 秒 ” 的 格式 


必 选 项 。 完 整 的 年 份 ， 例 如 ，1976《〈 而 不 是 76) 


必 选 项 。 表 示 的 月 份 ， 是 从 0 到 11 之 间 的 整数 (1 月 至 12 月) 


必 选 项 。 表 示 日 期 ， 是 从 1 到 31 之 间 的 整数 
可 选项 。 如 果 提供 了 minutes 则 必须 给 出 。 表 示 小 时 ， 是 从 0 到 23 的 整数 〈 午 夜 到 11pm) 
可 选项 。 如 果 提 供 了 seconds 则 必须 给 出 。 表 示 分 钟 ， 是 从 0 到 59 的 整数 


可 选项 。 如 果 提供 了 ms 则 必须 给 出 。 表 示 秒 钟 ， 是 从 0 到 59 的 整数 


可 选项 。 表 示 毫 秒 ， 是 从 0 到 999 的 整数 


下 面 以 示例 的 形式 来 介绍 如 何 创 建 日 期 对 象 。 
例如 ， 输 出 当前 的 日 期 和 时 间 。 代 码 如 下 : 


01 varnewDate=new Date(); /创建 当前 日 期 对 象 
02 document.write(newDate); // 输 出 当前 日 期 和 时 间 


运行 结果 为 : 
Tue May 9 17:55:03 UTC+0800 2017 
例如 ， 用 年 、 月 、 日 (2015-6-20) 来 创建 日 期 对 象 。 代 码 如 下 : 


01 varnewDate=new Date(2015,5,20); 1/ 创建 指定 年 月 日 的 日 期 对 象 
02 document.write(newDate); // 输 出 指定 日 期 和 时 间 


运行 结果 为 : 
Sat Jun 20 00:00:00 UTC+0800 2015 
例如 ， 用 年 、 月 、 日 、 小 时 、 分 钟 、 秒 (2015-6-20 13:12:56) 来 创建 日 期 对 象 。 代 码 如 下 : 


01 varnewDate=new Date(2015,5,20,13,12,56); /创建 指定 时 间 的 日 期 对 象 
02 document.write(newDate); /输出 指定 日 期 和 时 间 
运行 结果 为 : 


Sat Jun 20 13:12:56 UTC+0800 2015 
例如 ， 以 字符 串 形式 创建 日 期 对 象 (2015-6-20 13:12:56)。 代 码 如 下 : 


01 varnewDate=new Date("Jun 20,2015 13:12:56"); /以 字符 串 形 式 创建 日 期 对 象 
02 document.write(newDate); /| 输出 指定 日 期 和 时 间 
运行 结果 为 : 


Sat Jun 20 13:12:56 UTC+0800 2015 


ca 
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例如 ， 以 另 一 种 字符 串 的 形式 创建 日 期 对 象 (2015-6-20 13:12:56)。 代 码 如 下 : 


01 varnewDate=new Date("2015/06/20 13:12:56"); /以 字符 串 形 式 创建 日 期 对 象 
02 document.write(newDate); 1/ 输 出 指定 日 期 和 时 间 
运行 结果 为 : 


Sat Jun 20 13:12:56 UTC+0800 2015 


6.2.2 Date 对 象 的 属性 


Date 对 象 的 属性 有 constructor 和 prototype。 在 这 里 介绍 这 两 个 属性 的 用 法 。 
1. constructor 属性 

constructor 属性 可 以 判断 一 个 对 象 的 类 型 ， 该 属性 引用 的 是 对 象 的 构造 函数 。 
语法 如 下 : 

object.constructor 

必 选 项 object 是 对 象 实例 的 名 称 。 

例如 ， 判 断 当 前 对 象 是 否 为 日 期 对 象 。 代 码 如 下 : 


01 varnewDate=new Date(); 1/ 创建 当前 日 期 对 象 

02 if(newDate.constructor==Date) // 如 果 当 前 对 象 是 日 期 对 象 
03 document.write(" 日 期 型 对 象 "); /| 输出 字符 串 

运行 结果 为 : 

日 期 型 对 象 


2. prototype 属性 

prototype 属性 可 以 为 Date 对 象 添加 自 定义 的 属性 或 方法 。 
语法 如 下 : 

Date.prototype.name=value 

参数 说 明 。 

回 name: 要 添加 的 属性 名 或 方法 名 。 

回 value: 添加 属性 的 值 或 执行 方法 的 函数 。 

例如 ， 用 自 定义 属性 来 记录 当前 的 年 份 。 代 码 如 下 : 


01 varnewDate=new Date(); /| 创建 当前 日 期 对 象 

02 Date.prototype.mark=newDate.getFullYear(); /向 日 期 对 象 中 添加 属性 
03 document.write(newDate.mark); // 输 出 新 添加 的 属性 的 值 
运行 结果 为 : 

2018 
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6.2.3 ”Date 对 象 的 方法 


Date 对 象 是 JavaScript 的 一 种 内 部 对 象 。 该 对 象 没有 可 以 直接 读 写 的 属性 ， 所 有 对 日 期 和 时 间 的 
操作 都 是 通过 方法 完成 的 。Date 对 象 的 方法 如 表 6.4 所 示 。 


表 6.4 Date 对 象 的 方法 


方 法 说 明 

getDate0) 从 Date 对 象 返回 一 个 月 中 的 某 一 天 (1~31) 

getDay0 从 Date 对 象 返回 一 周 中 的 某 一 天 (0-~6) 

getMonthO) 从 Date 对 象 返回 月 份 (0~11) 

getFullYear0) 从 Date 对 象 以 四 位 数字 返回 年 份 

getYear0 从 Date 对 象 以 两 位 或 4 位 数字 返回 年 份 

getHoursO 返回 Date 对 象 的 小 时 (0~23) 

getMinutes| 返回 Date 对 象 的 分 钟 (0~59) 

getSecondsO 返回 Date 对 象 的 秒 数 (0~59) 

getMillisecondsO 返回 Date 对 象 的 毫秒 〈0-999) 

getTimeO 返回 1970 年 1 月 1 日 至 今 的 毫秒 数 

setDateO 设置 Date 对 象 中 月 的 某 一 天 (1~31) 

setMonthO 设置 Date 对 象 中 月 份 (0~11) 

setFullYear0) 设置 Date 对 象 中 的 年 份 〈 四 位 数字 ) 

SetYearO) 设置 Date 对 象 中 的 年 份 〈 两 位 或 四 位 数字 ) 

setHoursO) 设置 Date 对 象 中 的 小 时 (0~23) 

setMinutes() 设置 Date 对 象 中 的 分 钟 (0~59) 

setSeconds() 设置 Date 对 象 中 的 秒 钟 (0~59) 

setMilliseconds() 设置 Date 对 象 中 的 毫秒 (0-999) 

setTimeO 通过 从 1970 年 1 月 1 日 午夜 添加 或 减 去 指定 数目 的 毫秒 来 计算 日 期 和 时 间 

toStringO 把 Date 对 象 转换 为 字符 串 

toTimeStringO0 把 Date 对 象 的 时 间 部 分 转换 为 字符 串 

toDateStringO) 把 Date 对 象 的 日 期 部 分 转换 为 字符 串 

toGMTString0 根据 格林 威 治 时 间 ， 把 Date 对 象 转换 为 字符 串 

toUTCString0) 根据 世界 时 ， 把 Date 对 象 转换 为 字符 串 

toLocaleString0 根据 本 地 时 间 格 式 ， 把 Date 对 象 转换 为 字符 串 

toLocaleTimeStringO 根据 本 地 时 间 格 式 ， 把 Date 对 象 的 时 间 部 分 转换 为 字符 串 

toLocaleDateStringO) 根据 本 地 时 间 格 式 ， 把 Date 对 象 的 日 期 部 分 转换 为 字符 串 
NC/ 


UTC 是 协调 世界 时 ( Coordinated Universal Time ) 的 简称 ，GMT 是 格林 威 治 时 ( Greenwich Mean 
Time ) 的 简称 。 
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意 
应 用 Date 对 象 中 的 getMonth() 方 法 获取 的 值 要 比 系统 中 实际 月 份 的 值 小 1。 


【 例 6.02】 应 用 Date 对 象 中 的 方法 获取 当前 的 完整 年 份 、 月 份 、 日 期 、 星 期 、 小 时 数 、 分 钟 数 
和 秒 数 , 将 当前 的 日 期 和 时 间 分 别 连接 在 一 起 并 输出 。 程 序 代码 如 下 : ( 实例 位 置 : 资源 包 \ 源 码 \06\6.02 ) 


01 varnow=new Date(); // 创 建 日 期 对 象 

02 var year=now.getFullYear(); // 获 取 当 前 年 份 

03 var month=now.getMonth()+1; // 获 取 当 前 月 份 

04 var date=now.getDate(); // 获 取 当 前 日 期 

05 var day=now.getDay(); // 获 取 当 前 星期 

06 varweek="; // 初 始 化 变量 

07 switch(day}{ 

08 case 1: 1/ 如果 变 量 day 的 值 为 1 
09 week=" 星 期 一 "; /为 变量 赋值 

10 break; // 退 出 switch 语句 

11 case 2: // 如 果 变量 day 的 值 为 2 
12 week=" 星 期 二 "; // 为 变量 赋值 

13 break; // 退 出 switch 语句 

14 case 3: // 如 果 变 量 day 的 值 为 3 
15 week=" 星 期 三 "; /为 变量 赋值 

16 break; // 退 出 switch 语句 

17 case 4: // 如 果 变 量 day 的 值 为 4 
18 week=" 星 期 四 "; /为 变量 赋值 

19 break; /退出 switch 语句 

20 case 5: // 如 果 变 量 day 的 值 为 5 
24 week=" 星 期 五 "; /为 变量 赋值 

22 break:; // 退 出 switch 语句 

23 case 6: // 如 果 变 量 day 的 值 为 6 
24 week=" 星 期 六 "; /为 变量 赋值 

25 break; // 退 出 switch 语句 

26 default: /默认 值 

27 week=" 星 期 日 "; /为 变量 赋值 

28 break: // 退 出 switch 语句 
2 

30 var hour=now.getHours(); 1/ 获取 当前 小 时 数 

31 var minute=now.getMinutes(); 1/ 获取 当前 分 钟 数 

32 var second=now.getSeconds(); 1/ 获取 当 前 秒 数 


33 ”// 为 字体 设置 样式 

34 document.write("<span style='font-size:24px;font-family: 楷 体 :color:#FF9900'>"); 

35 ”document.write(" 今 天 是 : "+year+" 年 "+month+" 月 "+date+" 日 "+week); /输出 当前 的 日 期 和 星期 
36 ”document.write("<br> 现 在 是 : "+hour+":"+minute+""+second); // 输 出 当前 的 时 间 

37 document.write("</span>"); // 输 出 </span> 结 束 标记 


运行 结果 如 图 6.2 所 示 。 
应 用 Date 对 象 的 方法 除了 可 以 获取 日 期 和 时 间 之 外 ， 还 可 以 设置 日 期 和 时 间 。 在 JavaScript 中 只 
要 定义 了 一 个 日 期 对 象 ， 就 可 以 针对 该 日 期 对 象 的 日 期 部 分 或 时 间 部 分 进行 设置 。 示 例 代 码 如 下 : 
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var myDate=new Date(); 
myDate.setFullYear(2012); 
myDate.setMonth(5); 
myDate.setDate(12); 
myDate.setHours(10); 
myDate.setMinutes(10); 
myDate.setSeconds(10); 
document.write(myDate); 


运行 结果 为 : 
Tue Jun 12 10:10:10 UTC+0800 2012 


在 脚本 编程 中 可 能 需要 处 理 许多 关于 日 期 的 计算 ， 例 如 计算 经 过 固定 天 数 或 星期 之 后 的 日 期 或 计 
算 两 个 日 期 之 间 的 天 数 。 在 这 些 计算 中 ，JavaScript 日 期 值 都 是 以 毫秒 为 单位 的 。 


【 例 6.03】 


位 置 : 资源 包 \ 源 码 \06\6.03 ) 


var date1=new Date(); 

var theNextYear=date1.getFullYear()+1; 
date1.setFullYear(theNextYear); 
date1.setMonth(0); 

date1.setDate(1); 

var date2=new Date(); 

var date3=date1.getTime()-date2.getTime(); 
var days=Math.ceil(date3/(24*60*60*1000)); 
alert(" 今 天 距离 明年 元 旦 还 有 "+days+" 天 "); 


运行 结果 如 图 6.3 所 示 。 


Er 


输出 当前 日 期 和 时 间 


今天 是 : 2017 年 7 月 21 日 星期 五 
现在 是 : 11:50:12 


图 6.2 输出 当前 的 日 期 和 时 间 


// 创 建 当前 日 期 对 象 
// 设 置 完整 的 年 份 
// 设 置 月 份 

/设置 日 期 

1/ 设置 小 时 

// 设 置 分 钟 

// 设 置 秒 钟 

/| 输出 日 期 对 象 


应 用 Date 对 象 中 的 方法 获取 当前 日 期 距离 明年 元 旦 的 天 数 。 程 序 代 码 如 下 :( 实例 


// 创 建 当前 的 日 期 对 象 

// 获 取 明 年 的 年 份 

/设置 日 期 对 象 date1 中 的 年 份 
// 设 置 日 期 对 象 date1 中 的 月 份 
/设置 日 期 对 象 date1 中 的 日 期 
// 创 建 当前 的 日 期 对 象 

// 获 取 两 个 日 期 相差 的 毫秒 数 
// 将 毫秒 数 转 换 成 天 数 

/| 输出 结果 


FY 今天 生 高 明 秆 元 旦 还 有 164 天 


[| 


图 6.3 输出 当前 日 期 距离 明年 元 旦 的 天 数 


在 Date 对 象 的 方法 中 还 提供 了 一 些 以 “to” 开 头 的 方法 ， 这 些 方法 可 以 将 Date 对 象 转换 为 不 同形 
式 的 字符 串 ， 示 例 代码 如 下 : 


<h3> 将 Date 对 象 转换 为 不 同形 式 的 字符 串 </h3> 
<script type="text/javascript"> 

var newDate=new Date(); 
document.write(newDate.toString()+"<br>"); 
document.write(newDate.toTimeString()+"<br>"); 
document.write(newDate.toDateString()+"<br>"); 


/创建 当前 日 期 对 象 

/将 Date 对 象 转换 为 字符 串 

/将 Date 对 象 的 时 间 部 分 转换 为 字符 串 
/将 Date 对 象 的 日 期 部 分 转换 为 字符 串 
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07 ”document.write(newDate toLocaleString()+"<br> /将 Date 对 象 转 换 为 本 地 格式 的 字符 串 
08 // 将 Date 对 象 的 时 间 部 分 转换 为 本 地 格式 的 字符 串 

09 document.write(newDate.toLocaleTimeString()+"<br>"); 

10 /将 Date 对 象 的 日 期 部 分 转换 为 本 地 格式 的 字符 串 

11 document.write(newDate.toLocaleDateString()); 

12 </script> 


行 结果 如 图 6.4 所 示 。 


[a 


(SO ecwromnee po] 


文件 站 光束 E] 到 看 (V) 。 交大 穴内 工具 (T) 帮 翅 |H) 
3 


6.3.1 猜 数 字 大 小 


做 一 个 简单 的 猜 数 字 大 小 的 游戏 (0~4 为 小 ，5~9 为 大 )， 运 行 结果 如 图 6.5 所 示 。( 实例 位 置 : 资 
源 包 \ 源 码 \06\ 实 战 \01 ) 


OS 间 EAcodevm05UoWn P - | 局 委 小 


EC 
Ez 


“0 


图 6.5 戎 数字 大 小 
6.3.2 根据 当前 小 时 数 输出 分 时 问候 信息 


通过 Date 对 象 获得 当前 时 间 的 小 时 数 ， 对 小 时 数 进行 判断 ， 根 据 判 断 结果 输出 自 定义 的 分 时 间 候 
信息 ， 运 行 结果 如 图 6.6 所 示 。( 实例 位 置 : 资源 包 \ 源 码 \06\ 实 战 \02 ) 
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文件 四 流 台 中” 豆 看 WW 必 二 关内 
2 


图 6.6 输出 自 定义 的 分 时 间 候 信息 
6.4 小 结 


本 章 主要 讲解 了 JavaScript 中 比较 常用 的 两 种 内 部 对 象 一 一 Math 对 象 和 Date 对 象 。 通 过 本 章 的 学 
习 ， 读 者 可 以 了 解 这 些 内 部 对 象 的 简单 应 用 。 


第 = 
上 早 
数组 
(后 | 视频 讲解 : 1 小 时 51 分 钟 ) 


数组 是 JavaScript 中 常用 的 数据 类 型 ， 它 是 JavaScript 程序 设计 的 重要 内 容 ， 
提供 了 一 种 快速 、 方便 地 管理 一 组 相关 数据 的 方法 。 通 过 数组 可 以 对 大 量 性 质 相同 
的 数据 进行 存储 、 排 序 、 插 入 及 删除 等 操作 ， 从 而 可 以 有 效 地 提高 程序 开发 效率 及 
改善 程序 的 编写 方式 。 本 章 将 介绍 数组 的 一 些 基本 概念 和 数组 对 象 的 属性 和 方法 。 

通过 学 习 本 章 ， 读 者 主要 宁可 以 下 内 容 : 

WI 什么 是 数组 

MH JavaScript 中 定义 数组 的 方法 

”JavaScript 操作 数组 元 素 的 方法 

”JavaScript 数组 的 常用 属性 和 方法 


数组 是 JavaScript 中 的 一 种 复合 数据 类 型 。 变量 中 保存 单个 数据 ， 而 数组 中 则 保存 的 是 多 个 数据 的 
集合 。 数 组 与 变量 的 比较 效果 如 图 7.1 所 示 。 

1. 数组 概念 

数组 (Array) 就 是 一 组 数据 的 集合 。 数 组 是 JavaScript 中 用 来 存储 和 操作 有 序数 据 集 的 数据 结构 。 
可 以 把 数组 看 作 一 个 单行 表格 ， 该 表格 的 每 一 个 单元 格 中 都 可 以 存储 一 个 数据 ， 即 一 个 数组 中 可 以 包 
含 多 个 元 素 ， 如 图 7.2 所 示 。 


四 as 元 素 1 元 素 2 | 元 素 3 元 素 4 元 素 5 


图 7.1 数组 与 变量 的 比较 效果 图 7.2 数组 示意 图 


由 于 JavaScript 是 一 种 弱 类 型 的 语言 , 所 以 在 数组 中 的 每 个 元 素 的 类 型 可 以 是 不 同 的 。 数 组 中 的 元 
素 类 型 可 以 是 数值 型 、 字 符 串 型 和 布尔 型 等 ， 甚 至 也 可 以 是 一 个 数组 。 

2. 数组 元 素 

数组 是 数组 元 素 的 集合 ,在 图 7.2 中 ,每 个 单元 格 中 所 存放 的 就 是 数组 元 素 。 例 如 ， 一 个 班级 的 所 
有 学 生 就 可 以 看 作 是 一 个 数组 ， 每 一 位 学 生 都 是 数组 中 的 一 个 元 素 ;一 个 酒店 的 所 有 房间 就 相当 于 一 
个 数组 ， 每 一 个 房间 都 是 这 个 数组 中 的 一 个 元 素 。 

每 个 数组 元 素 都 有 一 个 索引 号 〈 数 组 的 下 标 )， 通 过 索引 号 可 以 方便 地 引用 数组 元 素 。 数 组 的 下 标 
从 0 开始 编号 ， 例 如 ， 第 一 个 数组 元 素 的 下 标 是 0， 第 二 个 数组 元 素 的 下 标 是 1， 以 此 类 推 。 


7.2 定义 数组 


在 JavaScript 中 数组 也 是 一 种 对 象 ， 被 称 为 数组 对 象 。 因 此 在 定义 数组 时 ， 也 可 以 使 用 构造 函 
JavaScript 中 定义 数组 的 方法 主要 有 4 种 。 


7.2.1 定义 空 数组 
使 用 不 带 参数 的 构造 函数 可 以 定义 一 个 空 数组 。 顾名思义 ， 空 数组 中 是 没有 数组 元 素 的 ， 可 以 在 


定义 空 数组 后 再 向 数组 中 添加 数组 元 素 。 
语法 如 下 : 


arrayObject = new Array() 
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参数 说 明 。 
arrayObject: 必 选 项 。 新 创建 的 数组 对 象 名 。 
例如 ， 创 建 一 个 空 数组 ， 然 后 向 该 数组 中 添加 数组 元 素 。 代 码 如 下 : 


01 vararr = new Array(); /定义 一 个 空 数组 

02 ”arr[0] = " 零 基础 学 JavaScript"; // 向 数组 中 添加 第 一 个 数组 元 素 
03 arr[1] = " 零 基础 学 PHP"; /向 数组 中 添加 第 二 个 数组 元 素 
04 ”arr[2] = " 零 基础 学 Java"; /向 数组 中 添加 第 三 个 数组 元 素 


在 上 述 代码 中 定义 了 一 个 空 数组 ,此 时 数组 中 元 素 的 个 数 为 0。 在 为 数组 的 元 素 赋值 后 ， 数 组 中 才 
有 了 数组 元 素 。 


7.2.2 指定 数组 长 度 


在 定义 数组 的 同时 可 以 指定 数组 元 素 的 个 数 。 此 时 并 没有 为 数组 元 素 赋值 ， 所 有 数组 元 素 的 值 都 
是 undefined。 

语法 如 下 : 

arrayObject = new Array(size) 


参数 说 明 。 

回 arrayObject: 必 选 项 。 新 创建 的 数组 对 象 名 。 

回 size: 设置 数组 的 长 度 。 由 于 数组 的 下 标 是 从 零 开始 ， 创 建 元 素 的 下 标 将 从 0 到 size-1。 
例如 ， 创 建 一 个 数组 元 素 个 数 为 3 的 数组 ， 并 向 该 数组 中 存 入 数据 。 代 码 如 下 : 


01 var arr = new Array(3); /定义 一 个 元 素 个 数 为 3 的 数组 
02 arrfo] = 1 /为 第 一 个 数组 元 素 赋值 
03 arr[1] = 2; /为 第 二 个 数组 元 素 赋值 
04 arr[2] = 3; /为 第 三 个 数组 元 素 赋值 


在 上 述 代码 中 定义 了 一 个 元 素 个 数 为 3 的 数组 。 在 为 数组 元 素 赋值 之 前 ， 这 3 个 数组 元 素 的 值 都 


是 undefined。 


7.2.3 指定 数组 元 素 


在 定义 数组 的 同时 可 以 直接 给 出 数组 元 素 的 值 。 此 时 数组 的 长 度 就 是 在 括号 中 给 出 的 数组 元 素 的 
个 数 。 

语法 如 下 : 

arrayObject = new Array(element1, element2, element3, ...) 

参数 说 明 。 

arrayObject: 必 选 项 。 新 创建 的 数组 对 象 名 。 

回 element: 存 入 数组 中 的 元 素 。 使 用 该 语法 时 必须 有 一 个 以 上 元 素 。 
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例如 ， 创 建 数组 对 象 的 同时 ， 向 该 对 象 中 存 入 数组 元 素 。 代 码 如 下 : 
var arr = new Array(123, " 零 基础 学 JavaScript", true); /定义 一 个 包含 3 个 元 素 的 数组 


7.2.4 直接 定义 数组 


在 JavaScript 中 还 有 一 种 定义 数组 的 方式 ,这 种 方式 不 需要 使 用 构造 函数 , 直接 将 数组 元 素 放 在 一 
个 中 括号 中 ， 元 素 与 元 素 之 间 用 逗号 分 隔 。 

语法 如 下 : 

arrayObject = [element1, element2, element3, ...] 


参数 说 明 。 

回 arrayObject: 必 选 项 。 新 创建 的 数组 对 象 名 。 

回 element: 存 入 数组 中 的 元 素 。 使 用 该 语法 时 必须 有 一 个 以 上 元 素 。 

例如 ， 直 接 定义 一 个 含有 3 个 元 素 的 数组 。 代 码 如 下 : 

var arr = [123, " 零 基 础 学 JavaScript", true]; // 直 接 定义 一 个 包含 3 个 元 素 的 数组 


7.3 操作 数组 元 素 


视频 讲解 


数组 是 数组 元 素 的 集合 ， 在 对 数组 进行 操作 时 ， 实 际 上 是 对 数组 元 素 进行 输入 或 输出 、 添 加 或 删 
除 的 操作 。 


7.3.1 数组 元 素 的 输入 和 输出 


数组 元 素 的 输入 即 为 数组 中 的 元 素 进 行 赋值 ， 数 组 元 素 的 输出 即 获取 数组 中 元 素 的 值 并 输出 ， 下 
面 分 别 进 行 介绍 。 

1. 数组 元 素 的 输入 

向 数组 对 象 中 输入 数组 元 素 有 3 种 方法 。 

(1) 在 定义 数组 对 象 时 直接 输入 数组 元 素 

这 种 方法 只 能 在 数组 元 素 确 定 的 情况 下 才 可 以 使 用 。 

例如 ， 在 创建 数组 对 象 的 同时 存 入 字符 串 数 组 。 代 码 如 下 : 

var arr = new Array("a","b","c","d"); /定义 一 个 包含 4 个 元 素 的 数组 


(2) 利用 数组 对 象 的 元 素 下 标 向 其 输入 数组 元 素 
该 方法 可 以 随意 地 向 数组 对 象 中 的 各 元 素 赋值 ， 或 是 修改 数组 中 的 任意 元 素 值 。 
例如 ， 在 创建 一 个 长 度 为 7 的 数组 对 象 后 ， 向 下 标 为 3 和 4 的 元 素 中 赋值 。 
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01 var arr = new Array(7); /定义 一 个 长 度 为 7 的 数组 
(02 amt] = "a /为 下 标 为 3 的 数组 元 素 赋值 
03 arrf4] ="b"; // 为 下 标 为 4 的 数组 元 素 赋值 


(3) 利用 for 语句 向 数组 对 象 中 输入 数组 元 素 
该 方法 主要 用 于 批量 向 数组 对 象 中 输入 数组 元 素 ， 一 般 用 于 向 数组 对 象 中 赋 初 值 。 
例如 ， 可 以 通过 改变 变量 n 的 值 (必须 是 数值 型 ), 给 数组 对 象 赋 指定 个 数 的 数值 元 素 。 代 码 如 下 : 


01 varn=7; /定义 变量 并 对 其 赋值 

02 var arr = new Array(); /定义 一 个 空 数组 

03 for (var i=0;i<n:i++)f /应 用 for 循环 语句 为 数组 元 素 赋值 
04 arrfi]=i; 

05 } 

2. 数组 元 素 的 输出 


将 数组 对 象 中 的 元 素 值 进行 输出 有 3 种 方法 。 

(1) 用 下 标 获取 指定 元 素 值 

该 方法 通过 数组 对 象 的 下 标 ， 获 取 指 定 的 元 素 值 。 
例如 ， 获 取 数 组 对 象 中 的 第 3 个 元 素 的 值 。 代 码 如 下 : 


01 var arr = new Array("a","b","c","d"); /定义 数组 
02 var third = arr[2]; 1/ 获取 下 标 为 2 的 数组 元 素 
03 document.write(third); // 输 出 变量 的 值 


运行 结果 为 : 
C 


全 注意 
数组 对 象 的 元 素 下 标 是 从 0 开始 的 。 


(2) 用 for 语句 获取 数组 中 的 元 素 值 
该 方法 是 利用 for 语句 获取 数组 对 象 中 的 所 有 元 素 值 。 
例如 ， 获 取 数组 对 象 中 的 所 有 元 素 值 。 代 码 如 下 : 


01 varstr="™"; /定义 变量 并 进行 初始 化 

02 var arr = new Array("a","b","c","d"); /定义 数组 

03 for (var i=0;i<4:i++X{ /定义 for 循环 语句 

04 str=str+arr[i]; /将 各 个 数组 元 素 连 接 在 一 起 
05 } 

06 document.write(str); 1/ 输 出 变量 的 值 

运行 结果 为 : 


abcd 
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(3) 用 数组 对 象 名 输出 所 有 元 素 值 
该 方法 是 用 创建 的 数组 对 象 本 身 显 示 数 组 中 的 所 有 元 素 值 。 
例如 ， 显 示 数 组 中 的 所 有 元 素 值 。 代 码 如 下 : 


01 vararr=newArray("a","b","c","d"); /定义 数组 

02 document.write(arr); // 输 出 数组 中 所 有 元 素 的 值 
结果 为 : 

a,b,c,d 


【 例 7.01】 某 班级 里 有 3 个 学 霸 ， 创 建 一 个 存储 3 个 学 霸 姓 名 〈 张 三 、 李 四 、 王 五 ) 的 数组 ， 
然后 输出 这 3 个 数组 元 素 。 首 先 创建 一 个 包含 3 个 元 素 的 数组 ， 并 为 每 个 数组 元 素 赋值 ， 然 后 使 用 for 
循环 语句 遍历 输出 数组 中 的 所 有 元 素 。 代 码 如 下 :( 实例 位 置 : 资源 包 \ 源 码 \07\7.01 ) 


01 <scripttype="text/javascript"> 


02 var students = new Array(3); // 定 义 数组 

03 students[0] = " 张 三 "; /为 下 标 为 0 的 数组 元 素 赋值 
04 ”students[1] = " 李 四 "; // 为 下 标 为 1 的 数组 元 素 赋值 
05 students[2] = " 王 五 "; // 为 下 标 为 2 的 数组 元 素 赋值 


06 for(vari=0;i<3,;i++X{ 
07 document.write( 第 "+(i+1)+" 个 学 霸 姓 名 是 : "+students[]+"<br>"); /循环 输出 数组 元 素 


08 } 
09 </script> 
运行 结果 如 图 7.3 所 示 。 
_ Cope. ENCode\st5WlvneP - ©| EPE 
7.3.2 ”数组 元 素 的 添加 文 Em IRD Wa 


在 定义 数组 时 虽然 已 经 设置 了 数组 元 素 的 个 数 ， 但 
是 该 数组 的 元 素 个 数 并 不 是 固定 的 。 可 以 通过 添加 数组 
元 素 的 方法 来 增加 数组 元 素 的 个 数 。 添 加 数组 元 素 的 方 图 7.3 ”使 用 数组 存储 学 霸 姓 名 
法 非常 简单 ， 只 要 对 新 的 数组 元 素 进行 赋值 即 可 。 

例如 ， 定 义 一 个 包含 两 个 元 素 的 数组 ， 然 后 为 数组 添加 3 个 元 素 ， 最 后 输出 数组 中 的 所 有 元 素 值 ， 
代码 如 下 


01 ”var arr = new Array(" 零 基础 学 JavaScript"," 零 基础 学 PHP"); /定义 数组 

02 ”arr[2] = " 零 基 础 学 Java"; /添加 新 的 数组 元 素 

03 arr[3] = " 零 基础 学 C 护 '; /添加 新 的 数组 元 素 

04 ”arr[4] = " 零 基 础 学 Oracle"; /添加 新 的 数组 元 素 

05 document.write(arr); /输出 添加 元 素 后 的 数组 
运行 结果 为 : 


零 基础 学 JavaScript, 零 基础 学 PHP, 零 基础 学 Java, 零 基础 学 C#, 零 基础 学 Oracle 
另外 ， 还 可 以 对 已 经 存在 的 数组 元 素 进行 重新 赋值 。 例 如 ， 定 义 一 个 包含 两 个 元 素 的 数组 ， 将 第 
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二 个 数组 元 素 进行 重新 赋值 并 输出 数组 中 的 所 有 元 素 值 ， 代 码 如 下 : 


01 var arr = new Array(" 零 基础 学 JavaScript"," 零 基础 学 PHP"); /定义 数组 

02 arr[1] = " 零 基 础 学 Java"; /为 下 标 为 1 的 数组 元 素 重新 赋值 
03 document.write(arr); /输出 重新 赋值 后 的 新 数组 
运行 结果 为 : 


零 基 础 学 JavaScript, 零 基础 学 Java 


7.3.3 数组 元 素 的 删除 


使 用 delete 运算 符 可 以 删除 数组 元 素 的 值 ， 但 是 只 能 将 该 元 素 恢复 为 未 赋值 的 状态 ， 即 undefined， 
而 不 能 真正 地 删除 一 个 数组 元 素 ， 数 组 中 的 元 素 个 数 也 不 会 减少 。 

例如 ， 定 义 一 个 包含 3 个 元 素 的 数组 ， 然 后 应 用 delete 运算 符 删除 下 标 为 1 的 数组 元 素 ， 最 后 输 
出 数组 中 的 所 有 元 素 值 。 代 码 如 下 : 


01 var arr = new Array(" 零 基础 学 JavaScript"," 零 基础 学 PHP"," 零 基础 学 Java");// 定 义 数组 


02 delete arr[1]; /删除 下 标 为 1 的 数组 元 素 
03 document.write(arr); /| 输出 删除 元 素 后 的 数组 
运行 结果 为 : 


零 基 础 学 JavaScript,, 零 基础 学 Java 
注意 


应 用 delete 运算 符 删除 数组 元 素 之 前 和 删除 数组 元 素 之 后 ， 元 素 个 数 并 没有 改变 ， 改 变 的 只 是 
被 删除 的 数组 元 素 的 值 ， 该 值 变 为 undefined 。 


7.4 数组 的 属性 


在 数组 对 象 中 有 length 和 prototype 两 个 属性 。 下 面 分 别 对 这 两 个 属性 进行 详细 介绍 。 


7.4.1 length 属性 


length 属性 用 于 返回 数组 的 长 度 。 
语法 如 下 : 

arrayObject.length 

参数 说 明 。 

arrayObject: 数组 名 称 。 
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例如 ， 获 取 已 创建 的 数组 对 象 的 长 度 。 代 码 如 下 : 


01 vararr=new Array(1,2,3,4,5,6,7,8); /定义 数组 
02 document.write(arr.length); 1/ 输 出 数组 的 长 度 
运行 结果 为 : 
8 
例如 ， 增 加 已 有 数组 的 长 度 。 代 码 如 下 : 
01 vararr=new Array(1,2,3,4,5,6,7,8); /定义 数组 
02 arrfarr.length]=arr.length+1; /为 新 的 数组 元 素 赋值 
03 document.write(arr.length); /| 输出 数组 的 新 长 度 
运行 结果 为 
入 
总 


(1) 当 用 new Array0 创 建 数组 时 ， 并 不 对 其 进行 赋值 ，length 属性 的 返回 值 为 0。 
(2) 数组 的 长 度 是 由 数组 的 最 大 下 标 决定 的 。 


例如 ， 用 不 同 的 方法 创建 数组 ， 并 输出 数组 的 长 度 。 代 码 如 下 : 


01 var arr1 = new Array(); /定义 数组 arr1 

02 ”document.write(" 数 组 arr1 的 长 度 为 : "+arr1.length+"<p>"); /输出 数组 arr1 的 长 度 
03 var arr2 = new Array(3); /定义 数组 arr2 

04 ”document.write(" 数 组 arr2 的 长 度 为 : "+arr2.length+"<p>"); /输出 数组 arr2 的 长 度 
05 var arr3 = new Array(1,2,3,4,5); /定义 数组 arr3 

06 ”document.write(" 数 组 arr3 的 长 度 为 : "+arr3.length+"<p>"); /输出 数组 arr3 的 长 度 
07 vararr4 = [5,6]; /定义 数组 arr4 

08 ”document.write(" 数 组 arr4 的 长 度 为 : "+arr4.length+"<p>"); /输出 数组 arr4 的 长 度 
09 vararr5 = new Array(); /定义 数组 arr5 

10 arr5[9] = 100; /为 下 标 为 9 的 元 素 赋值 


11 ”document.write(" 数 组 arr5 的 长 度 为 : "+arr5.length+"<p>"); 。“// 输 出 数组 arr5 的 长 度 
运行 结果 如 图 7.4 所 示 。 


图 7.4 输出 数组 的 长 度 
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【 例 7.02】 将 东北 三 省 的 省 份 名 称 、 省 会 城市 名 称 以 及 3 个 城市 的 旅游 景点 分 别 定义 在 数组 中 ， 
应 用 for 循环 语句 和 数组 的 length 属性 , 将 省 份 、 省 会 以 及 旅游 景点 循环 输出 在 表格 中 。 代码 如 下 : ( 实 


例 位 置 : 


01 
02 
03 
04 
05 
06 
07 
08 


7.4.2 


资源 包 \ 源 码 \07\7.02 ) 


<table cellspacing="1" bgcolor="#CCOOFF"> 
<tr height="30" bgcolor="#FFFFFF"> 
<td align="center" width="50"> 序 号 </td> 
<td align="center" width="100"> 省 份 </td> 
<td align="center" width="100"> 省 会 </td> 
<td align="center" width="260"> 旅 游 景点 </td> 


</tr> 

<script type="text/javascript"> 

Var province=new Array(" 黑 龙 江 省 "," 吉 林 省 "," 辽 宁 省 "); /定义 省 份 数 组 

var city=new Array(" 险 尔 滨 市 "," 长 春 市 "," 沈 阳 市 "); // 定 义 省 会 数组 

var tourist=new Array(" 太 阳 岛 圣 索菲亚 教堂 中 央 大 街 "," 净 月 潭 长 影 世纪 城 动 植物 公园 "， 

"沈阳 故宫 沈阳 北 陵 张 氏 帅 府 "); // 定 义 旅游 景点 数组 

for(var i=0; i<province.length; i++}{ /定义 for 循环 语句 
document.write("<tr height=26 bgcolor=#FFFFFF'>"); /| 输出 <tr> 开 始 标记 
document.write("<td align='center >"+(i+1)+"</td>"); /| 输出 序号 
document.write("<td align='center>"+province[]+"</td>"); // 输 出 省 份 名 称 
document.write("<td align='center'>"+city[i]+"</td>"); /输出 省 会 名 称 
document.write("<td align='center >"+tourist[i]+"</td>"); /| 输出 旅游 景点 
document.write("</tr>"); /| 输出 </tr> 结 束 标 记 

} 

</script> 

</table> 


(Sle EACode\SL\06\02\inc DD» CO | 车 演出 首 合 、 省 会 和 该 


文件 (站 ” 妖 独 {E) ”查看 (V) ”次 二 六 (A) 工具 (项 助 (H) 


太阳 岛 圣 索菲亚 教堂 中 央 大 街 
净 月 潭 长 影 世 纪 城 动 植物 公园 
沈阳 故宫 沈阳 北 陵 张 氏 帅 府 


图 7.5 输出 省 份 、 省 会 和 旅游 景点 


prototype 属性 


prototype 属性 可 以 为 数组 对 象 添加 自 定义 的 属性 或 方法 。 
语法 如 下 : 


Array.prototype.name=value 
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参数 说 明 。 

name: 要 添加 的 属性 名 或 方法 名 。 

value: 添加 的 属性 的 值 或 执行 方法 的 函数 。 

例如 ， 利 用 prototype 属性 自 定义 一 个 方法 ， 用 于 显示 数组 中 的 最 后 一 个 元 素 。 代 码 如 下 : 


01 Array.prototype.outLast=function()f // 自 定义 outLast() 方 法 

02 document.write(this[this.length-1]); /| 输出 数组 中 最 后 一 个 元 素 
03 } 

04 vararr=new Array(1,2,3,4,5,6,7,8); /定义 数组 

05 arr.outLast(); // 调 用 自 定义 方法 

运行 结果 为 : 

8 


该 属性 的 用 法 与 String 对 象 的 prototype 属性 类 似 ， 下 面 以 实例 的 形式 对 该 属性 的 应 用 进行 说 明 。 
【 例 7.03】 应 用 数组 对 象 的 prototype 属性 自 定义 一 个 方法 ,用 于 显示 数组 中 的 全 部 数据 。 程 序 
代码 如 下 :( 实例 位 置 : 资源 包 \ 源 码 \07\7.03 ) 


01 <scripttype="text/javascript"> 


02 Array.prototype.outAll=function(ar}{ // 自 定义 outAll() 方 法 

03 for(var i=0;i<this.length;i++X{ /定义 for 循环 语句 

04 document.write(this[i]); /| 输出 数组 元 素 

05 document.write(ar); /| 输出 数组 元 素 之 间 的 分 隔 符 
06 } 

O70 

08 vararr=new Array(1,2,3,4,5,6,7,8); /定义 数组 

09 arr.outAll(" "); /调用 自 定义 的 outAll() 方 法 
10 </script> 

运行 结果 如 图 7.6 所 示 。 


7.6 应 用 自 定义 方法 输出 数组 中 的 所 有 数组 元 素 


7.5 数组 的 方法 


视频 讲解 。 


数组 是 JavaScript 中 的 一 个 内 置 对 象 , 使 用 数组 对 象 的 方法 可 以 更 加 方便 地 操作 数组 中 的 数据 。 数 
组 对 象 的 方法 如 表 7.1 所 示 。 
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表 7.1 数组 对 象 的 方法 


方法 说 明 

concatO 连接 两 个 或 更 多 的 数组 ， 并 返回 结果 

usht 向 数组 的 末尾 添加 一 个 或 多 个 元 素 ， 并 返回 新 的 长 度 
unshiftO 向 数组 的 开头 添加 一 个 或 多 个 元 素 ， 并 返回 新 的 长 度 
popO 删除 并 返回 数组 的 最 后 一 个 元 素 

shiftO 删除 并 返回 数组 的 第 一 个 元 素 

spliceO 删除 元 素 ， 并 向 数组 添加 新 元 素 

TeVverse0 颠倒 数组 中 元 素 的 顺序 

sortO 对 数组 的 元 素 进行 排序 

slice0 从 某 个 已 有 的 数组 返回 选 定 的 元 素 

toStringO 把 数组 转换 为 字符 串 ， 并 返回 结果 

toLocaleStringO 把 数组 转换 为 本 地 字符 串 ， 并 返回 结果 

joinO 把 数组 的 所 有 元 素 放 入 一 个 字符 串 ， 元 素 通过 指定 的 分 隔 符 进行 分 隔 


7.5.1 数组 的 添加 和 删除 


数组 的 添加 和 删除 可 以 使 用 concat0、pushO、unshiftO0、popO、shift0 和 splice0 方 法 实现 。 
1. concat() 方 法 

concat( 方 法 用 于 将 其 他 数组 连接 到 当前 数组 的 末尾 。 

语法 如 下 : 

arrayObject.concat(arrayX,arrayX,...,arrayX) 

参数 说 明 。 

回 arrayObject: 必 选 项 。 数 组 名 称 。 

回 arrayX: 必 选 项 。 该 参数 可 以 是 具体 的 值 ， 也 可 以 是 数组 对 象 。 

返回 值 : 返回 一 个 新 的 数组 ， 而 原 数组 中 的 元 素 和 数组 长 度 不 变 。 

例如 ， 在 数组 的 尾部 添加 数组 元 素 。 代 码 如 下 : 


01 vararr=new Array(1,2,3,4,5,6,7,8); /定义 数组 
02 document.write(arr.concat(9,10)); // 输 出 添加 元 素 后 的 新 数组 
运行 结果 为 : 


1,2,3,4,5,6,7,8,9,10 


例如 ， 在 数组 的 尾部 添加 其 他 数组 。 代 码 如 下 : 


01 var arr1=new Array('a','b’,'c’); /定义 数组 arr1 
02 vararr2=new Array('d','e',f); /定义 数组 arr2 
03 document.write(arr1.concat(arr2)); /| 输出 连接 后 的 数组 
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运行 结果 为 : 
a,b,c,d,e,f 


2. push() 方 法 


push0 方 法 向 数组 的 末尾 添加 一 个 或 多 个 元 素 ， 并 返回 添加 后 的 数组 长 度 。 
语法 如 下 : 


arrayObject.push(newelement1,newelement2,...,newelementX) 


参数 说 明 。 

回 arrayObject: 必 选 项 。 数 组 名 称 。 

回 newelement1: 必 选 项 。 要 添加 到 数组 的 第 一 个 元 素 。 

回 newelement2: 可 选项 。 要 添加 到 数组 的 第 二 个 元 素 。 

回 newelementX: 可 选项 。 可 添加 的 多 个 元 素 。 

返回 值 : 把 指定 的 值 添加 到 数组 后 的 新 长 度 。 

例如 ， 向 数组 的 末尾 添加 两 个 数组 元 素 ， 并 输出 原 数 组 、 添 加 元 素 后 的 数组 长 度 和 新 数组 。 代 码 


如 下 


01 vararr=new Array("JavaScript","HTML","CSS"); /定义 数组 

02 ”document.write(' 原 数组 : "+arr+'<br>'); // 输 出 原 数 组 

03 /向 数组 末尾 添加 两 个 元 素 并 输出 数组 长 度 

04 ”document.write(' 添 加 元 素 后 的 数组 长 度 : '+arr.push("PHP","Java")+'<br>'); 

05 ”document.write(' 新 数组 : '+arr); // 输 出 添加 元 素 后 的 新 数组 


运行 结果 如 图 7.7 所 示 。 


7.7 向 数组 的 末尾 添加 元 素 


3. unshift() 方 法 

unshiftO 方 法 向 数组 的 开头 添加 一 个 或 多 个 元 素 。 
语法 如 下 : 
arrayObject.unshift(newelement1,newelement2,...,newelementX) 
参数 说 明 。 

回 arrayObject: 必 选 项 。 数 组 名 称 。 


newelement1: 必 选 项 。 向 数组 添加 的 第 一 个 元 素 。 
回 newelement2: 可 选项 。 向 数组 添加 的 第 二 个 元 素 。 
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回 newelementX: 可 选项 。 可 添加 的 多 个 元 素 。 

返回 值 : 把 指定 的 值 添加 到 数组 后 的 新 长 度 。 

例如 ， 向 数组 的 开头 添加 两 个 数组 元 素 ， 并 输出 原 数 组 、 添 加 元 素 后 的 数组 长 度 和 新 数组 。 代 码 
如 下 : 

01 vararr=new Array("JavaScript","HTML","CSS"); /定义 数组 

02 ”document.write(' 原 数组 : '+arr+'<br>'); /输出 原 数组 


03 /向 数组 开头 添加 两 个 元 素 并 输出 数组 长 度 
04 ”document.write(' 添 加 元 素 后 的 数组 长 度 : '+arr.unshift("PHP","Java")+'<br>"); 


05 ”document.write(' 新 数组 :+arr); /| 输出 添加 元 素 后 的 新 数组 
运行 程序 ， 会 将 原 数 组 和 新 数组 中 的 内 容 显 示 在 页 面 中 ， 如 图 7.8 所 示 。 
4. pop() 方 法 


pop0 方 法 用 于 把 数组 中 的 最 后 一 个 元 素 从 数组 中 删除 ， 并 返回 删除 元 素 的 值 。 

语法 如 下 : 

arrayObject.pop() 

参数 说 明 。 

arrayObject: 必 选 项 。 数 组 名 称 。 

返回 值 : 在 数组 中 删除 的 最 后 一 个 元 素 的 值 。 

例如 ， 删 除数 组 中 的 最 后 一 个 元 素 ， 并 输出 原 数组 、 删 除 的 元 素 和 删除 元 素 后 的 数组 。 代 码 如 下 : 


01 vararr=new Array(1,2,3,4,5,6,7,8); /定义 数组 

02 ” document.write(' 原 数组 : "+arr+'<br>'); /输出 原 数组 

03 var del=arr.pop(); // 删 除数 组 中 最 后 一 个 元 素 
04 ”document.write(' 删 除 元 素 为 : "+del+'<br>"); // 输 出 删除 的 元 素 

05 ”document.write(' 删 除 后 的 数组 为 : '+arr); /| 输出 删除 后 的 数组 


运行 结果 如 图 7.9 所 示 。 


图 7.8 向 数组 的 开头 添加 元 素 图 7.9 删除 数组 中 最 后 一 个 元 素 
5. shift() 方 法 


shift0 方 法 用 于 把 数组 中 的 第 一 个 元 素 从 数组 中 删除 ， 并 返回 删除 元 素 的 值 。 
语法 如 下 : 


arrayObject.shift() 
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参数 说 明 。 

arrayObject: 必 选 项 。 数 组 名 称 。 

返回 值 : 在 数组 中 删除 的 第 一 个 元 素 的 值 。 

例如 ， 删 除数 组 中 的 第 一 个 元 素 ， 并 输出 原 数 组 、 删 除 的 元 素 和 删除 元 素 后 的 数组 。 代 码 如 下 : 


01 vararr=new Array(1,2,3,4,5,6,7,8); /定义 数组 

02 ”document.write(' 原 数组 : "+arr+'<br>"); // 输 出 原 数 组 

03 var del=arr.shift(); // 删 除数 组 中 第 一 个 元 素 
04 ”document.write(' 删 除 元 素 为 : "+del+'<br>"); // 输 出 删除 的 元 素 

05 ”document.write(' 删 除 后 的 数组 为 : +arrj; // 输 出 删除 后 的 数组 


运行 结果 如 图 7.10 所 示 。 


(BD | 站 EAcode\si\06Vndex PD - © 


注 驴 {E) 至 看 久 ) 


图 7.10 删除 数组 中 第 一 个 元 素 
6. splice() 方 法 


pop0 方 法 的 作用 是 删除 数组 的 最 后 一 个 元 素 ，shift0 方 法 的 作用 是 删除 数组 的 第 一 个 元 素 , 而 要 想 
更 灵活 地 删除 数组 中 的 元 素 , 可 以 使 用 splice0 方 法 ,通过 splice0 方 法 可 以 删除 数组 中 指定 位 置 的 元 素 ， 
还 可 以 向 数组 中 的 指定 位 置 添 加 新 元 素 。 

语法 如 下 : 

arrayObject.splice(start,length,element1,element2,...) 


参数 说 明 。 

回 arrayObject: 必 选 项 。 数 组 名 称 。 

回 start: 必 选 项 。 指 定 要 删除 数组 元 素 的 开始 位 置 ， 即 数组 的 下 标 。 

回 length: 可 选项 。 指 定 删除 数组 元 素 的 个 数 。 如 果 未 设置 该 参数 ， 则 删除 从 start 开始 到 原 数组 
末尾 的 所 有 元 素 。 

回 element: 可 选项 。 要 添加 到 数组 的 新 元 素 。 

例如 ， 在 splice0 方 法 中 应 用 不 同 的 参数 ， 对 相同 的 数组 中 的 元 素 进 行 删 除 操作 。 代 码 如 下 : 


01 var arr1 = new Array("a""b"…"c""d"); /定义 数组 

02 arr1.splice(1); /删除 第 二 个 元 素 和 之 后 的 所 有 元 素 

03 document.write(arr1+"<br>"); // 输 出 删除 后 的 数组 

04 vararr2=newAray("a","b","c","d"); /定义 数组 

05 arr2.splice(1,2); /删除 数组 中 的 第 二 个 和 第 三 个 元 素 

06 document.write(arr2+"<br>"); /| 输出 删除 后 的 数组 

07 vararr3=new Aray("a","b","c","d"); /定义 数组 

08 arr3.splice(1,2,"e","f"); // 删 除数 组 中 的 第 二 个 和 第 三 个 元 素 ， 并 添加 新 元 素 
09 document.write(arr3+"<br>"); /输出 删除 后 的 数组 
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10 var arr4 = new Array("a","b","c","d"); /定义 数组 
11 arr4.splice(1.0"e"f); // 在 第 二 个 元 素 前 添加 新 元 素 
12 document.write(arr4+"<br>"); // 输 出 删除 后 的 数组 


运行 结果 如 图 7.11 所 示 。 


Ee EACoce\SL\0G\ndex D ~ O 


图 7.11 删除 数组 中 指定 位 置 的 元 素 
7.5.2 ”设置 数组 的 排列 顺序 


将 数组 中 的 元 素 按照 指定 的 顺序 进行 排列 可 以 通过 reverse0 和 sort0 方 法 实现 。 
1. reverse() 方 法 

Ieverse() 方 法 用 于 颠倒 数组 中 元 素 的 顺序 。 

语法 如 下 : 

arrayObjectreverse() 

参数 说 明 。 


arrayObject: 必 选 项 。 数 组 名 称 。 
意 
该 方法 会 改变 原来 的 数组 ， 而 不 创建 新 数组 。 
例如 ， 将 数组 中 的 元 素 顺序 颠倒 后 显示 。 代 码 如 下 : 
01 vararr=new Array("JavaScript""HTML","CSS"); /定义 数组 


02 ”document.write(' 原 数组 : '+arr+'<br>'); /输出 原 数组 
03 arr.reverse(); // 对 数组 元 素 顺 序 进行 颠倒 
04 ”document.write( 颠倒 后 的 数组 : '+arr); // 输 出 颠倒 后 的 数组 


运行 结果 如 图 7.12 所 示 。 


司 EACode\sL\06Vndex. 只 -C | 辣 SRE 权 和 演出 


文件 [办 志 (E) 得 看 [V) 。 改 二 闪 ( 闪 工具 (D) 才 动 (H) 


7.12 将 数组 颠倒 输出 
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2. sort() 方 法 

sort0 方 法 用 于 对 数组 的 元 素 进行 排序 。 

语法 如 下 : 

arrayObject.sort(sortby) 

参数 说 明 。 

回 arrayObject: 必 选 项 。 数 组 名 称 。 

回 sortby: 可 选项 。 规 定 排序 的 顺序 ， 必 须 是 函数 。 

NO 
如 果 调用 该 方法 时 没有 使 用 参数 ， 将 按 字母 顺序 对 数组 中 的 元 素 进行 排序 ， 也 就 是 按照 字符 的 

编码 顺序 进行 排序 。 如 果 想 按照 其 他 标准 进行 排序 ， 就 需要 提供 比较 函数 。 


例如 ， 将 数组 中 的 元 素 按 字符 的 编码 顺序 进行 显示 。 代 码 如 下 : 


01 vararr=new Array("PHP","HTML","JavaScript"); /定义 数组 

02 ”document.write(' 原 数组 :+arr+'<br>"); // 输 出 原 数 组 

03 arr.sort(); // 对 数组 进行 排序 
04 ”document.write(' 排 序 后 的 数组 :+arr); // 输 出 排序 后 的 数组 


运行 程序 ， 将 原 数组 和 排序 后 的 数组 输出 ， 结 果 如 图 7.13 所 示 。 


7.13 ”输出 排序 前 与 排序 后 的 数组 


如 果 想 要 将 数组 元 素 按照 其 他 方法 进行 排序 ， 就 需要 指定 sort0 方 法 的 参数 。 该 参数 通常 是 一 个 比 
较 函 数 ， 该 函数 应 该 有 两 个 参数 〈 假 设 为 a 和 b)。 在 对 元 素 进行 排序 时 ， 每 次 比较 两 个 元 素 都 会 执行 
比较 函数 ， 并 将 这 两 个 元 素 作为 参数 传递 给 比较 函数 。 其 返回 值 有 以 下 两 种 情况 。 

回 ”如 果 返 回 值 大 于 0， 则 交换 两 个 元 素 的 位 置 。 

如 果 返 回 值 小 于 等 于 0， 则 不 进行 任何 操作 。 

例如 ， 定 义 一 个 包含 4 个 元 素 的 数组 ， 将 数组 中 的 元 素 按 从 小 到 大 的 顺序 进行 输出 。 代 码 如 下 : 


01 vararr=new Array(9,6,10,5); /定义 数组 

02 ”document.write(' 原 数组 : '+arr+'<br>); /输出 原 数 组 

03 function ascOrder(x,yjf // 定 义 比较 函数 

04 if(x>yX{ // 如 果 第 一 个 参数 值 大 于 第 二 个 参数 值 
05 return 1; /返回 1 

06 Jelse{ 

07 return -1; 1/ 返回 -1 

08 ) 
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09 } 
10 arr.sort(ascOrder); /对 数组 进行 排序 
11 documentwrite( 排 序 后 的 数组 : '+arr); /输出 排序 后 的 数组 


运行 结果 如 图 7.14 所 示 。 


(BD 本 Ecodeshoainde D ~ © [reese 


文件 昌 ” 询 强 E) 可 看 V) 收 基 夫 工具 中 帮 动 HH) 


拓扑 数 组， 6.9 10 


图 7.14 输出 排序 前 与 排序 后 的 数组 元 素 


【 例 7.04】 将 2016 年 电影 票房 排行 榜 前 五 名 的 影片 名 称 和 对 应 的 影片 票房 分 别 定义 在 数组 中 ， 
片 票房 进行 降序 排序 ， 将 排序 后 的 影片 排名 、 影 片 名 称 和 票房 输出 在 表格 中 。 代 码 如 下 : ( 实例 位 
资源 包 \ 源 码 \07\7.04 ) 


01 <table cellspacing="1" bgcolor="#CCOOFF"> 

02 <tr height="30" bgcolor="#FFFFFF"> 

03 <td align="center" width="50"> 排 名 </td> 

04 <td align="center" width="210"> 影 片 </td> 

05 <td align="center" width="100"> 票 房 </td> 

06 </tr> 

07 <scripttype="text/javascript"> 

08 /定义 影片 数组 movieArr 

09 “var movieArr=new Array(" 魔 兽 "," 美 人 鱼 "," 西 游记 之 孙悟空 三 打 白 骨 精 "," 疯 狂 动物 城 "," 美 国 队长 3"); 
10 var boxofficeArr=new Array(14.7,33.9,12,15.3,12.5); /定义 票房 数组 boxofficeArr 


11 var sortArr=new Array(14.7,33.9,12,15.3,12.5); /定义 票房 数组 sortArr 

12 function ascOrder(x,y)f /定义 比较 函数 

13 if(x<yX{ // 如 果 第 一 个 参数 值 小 于 第 二 个 参数 值 
14 return 1; /1/ 返 回 1 

15 }else{ 

16 return -1; 1/ 返 回 -1 

17 } 

Te 

19 sortArr.sort(ascOrder); /为 票房 进行 降序 排序 

20 for(var i=0; i<sortArrlength; i++)f /定义 外 层 for 循环 语句 

21 for(var j=0; j<sortArr.length; j++}{ /定义 内 层 for 循环 语句 

22 if(sortArrf]==boxofficeArr[)f // 分 别 获取 排序 后 的 票房 在 原 票房 数组 中 的 索引 
23 document.write("<tr height=26 bgcolor=#FFFFFF'>"); // 输 出 <tr> 标 记 
24 document write("<td align='center>"+(i+1)+"</td>"); // 输 出 影片 排名 
25 // 输 出 票房 对 应 的 影片 名 称 

26 document.write("<td class='left>"+movieArr[]+"</td>"); 

27 document.write("<td align='center>"+sortArr[i]+" 亿 元 </td>"); /输出 票房 

28 document.write("</tr>"); 1/ 输 出 </tr> 标 记 
29 BE 

30 时 

3 ) 

32 </script> 

33 </table> 


行 结果 如 图 7.15 所 示 。 
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7.5.3 获取 某 段 数组 元 素 


获取 数组 中 的 某 段 数组 元 素 主要 用 slice0 方 法 实现 。slice0 方 法 可 从 已 有 的 数组 中 返回 选 定 的 元 素 。 
语法 如 下 : 
arrayObject.slice(start,end) 


参数 说 明 。 

回 start: 必 选 项 。 规 定 从 何 处 开始 选取 。 如 果 是 负数 ， 那 么 它 规定 从 数组 尾部 开始 算 起 的 位 置 。 
也 就 是 说 ，-1 指 最 后 一 个 元 素 ，-2 指 倒数 第 二 个 元 素 ， 以 此 类 推 。 

回 end: 可 选项 。 规定 从 何 处 结束 选取 。 该 参数 是 数组 片断 结束 处 的 数组 下 标 。 如 果 没 有 指定 该 
参数 ， 那 么 切 分 的 数组 包含 从 start 到 数组 结束 的 所 有 元 素 。 如 果 这 个 参数 是 负数 ， 那 么 它 将 
从 数组 尾部 开始 算 起 。 

返回 值 : 返回 截取 后 的 数组 元 素 ， 该 方法 返回 的 数据 中 不 包括 end 索引 所 对 应 的 数据 。 

例如 ， 获 取 指 定数 组 中 某 段 数组 元 素 。 代 码 如 下 : 

01 vararr=new Array("a","b","c","d","e","f"); // 定 义 数组 

02 ”document.write(" 原 数组 : "+arr+"<br>"); /输出 原 数组 

03 /输出 截取 后 的 数组 

04 ”document.write(" 获 取 数 组 中 第 3 个 元 素 后 的 所 有 元 素 : "+arr.slice(2)+"<br>"); 

05 ”document.write(" 获 取 数 组 中 第 2 个 到 第 5 个 元 素 : "+arr.slice(1,5)+"<br>")， /输出 截取 后 的 数组 

06 ”document.write(" 获 取 数 组 中 倒数 第 2 个 元 素 后 的 所 有 元 素 : "+arr.slice(-2)); /输出 截取 后 的 数组 


运行 程序 ， 会 将 原 数组 以 及 截取 数组 中 元 素 后 的 数据 输出 ， 运 行 结果 如 图 7.16 所 示 。 


Gag 
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图 7.16 获取 数组 中 某 段 数组 元 素 
【 例 7.05】 某 歌 手 参 加 歌唱 比赛 ，5 位 评委 分 别 给 出 的 分 数 是 95、90、89、91、96， 要 获得 最 
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终 的 得 分 需要 去 掉 一 个 最 高 分 和 一 个 最 低 分 ， 并 计算 剩余 3 个 分 数 的 平均 分 。 试 着 计算 出 该 选手 的 最 
终 得 分 。 代 码 如 下 :( 实例 位 置 : 资源 包 \ 源 码 \07\7.05 ) 


01 <scripttype="text/javascript"> 


02 var scoreArr=new Array(95,90,89,91,96); /定义 分 数 数组 

03 var scoreStr="™; /定义 分 数字 符 串 变量 
04 for(vari=0; i<scoreArr.length; i++){f 

05 scoreStr+=scoreArr[i]+" 分 "; // 对 所 有 分 数 进行 连接 
06 } 

07 function ascOrder(x,yjf /定义 比较 函数 

08 if(x<yX{ // 如 果 第 一 个 参数 值 小 于 第 二 个 参数 值 
09 return 1; // 返 回 1 

10 Jelse{ 

11 return -1; // 返 回 -1 

他 } 

13. 3 

14 scoreArr.sort(ascOrder); /为 分 数 进行 降序 排序 
15 var newArr=scoreArr.slice(1,scoreArrlength-1); /去 除 最 高 分 和 最 低 分 
16 var totalScore=0; // 定 义 总 分 变量 

17 for(vari=0; i<newArr.length; i++){ 

18 totalScore+=newArrfi]; /计算 总 分 

19° 

20 ”document.write(" 五 位 评委 打分 : "+scoreStr); // 输 出 5 位 评委 的 打分 


21 ”document.write("<br> 去 掉 一 个 最 高 分 :"+scoreArr[0]+" 分 "); /输出 去 掉 的 最 高 分 

22 /| 输出 去 掉 的 最 低 分 

23 ”document.write("<br> 去 掉 一 个 最 低 分 :"+scoreArr[scoreArr.length-1]+" 分 "); 

24 ”document.write("<br> 选 手 最 终 得 分 :"+totalScore/newArr.length+" 分 "); // 输 出 选手 最 终 得 分 
25 </script> 


运行 程序 ， 结 果 如 图 7.17 所 示 。 


7.17 计算 选手 的 最 终 得 分 


7.5.4 数组 转换 成 字符 串 


将 数组 转换 成 字符 串 主 要 通过 toString0、toLocaleString0 和 join0 方 法 实现 。 
1. toString() 方 法 
toString0 方 法 可 把 数组 转换 为 字符 串 ， 并 返回 结果 。 


arrayObjecttoString() 

参数 说 明 。 

arrayObject: 必 选 项 。 数 组 名 称 。 

返回 值 : 以 字符 串 显 示 数 组 对 象 。 返 回 值 与 没有 参数 的 join0 方 法 返回 的 字符 串 相同 。 


意 
在 转换 成 字符 串 后 ， 数 组 中 的 各 元 素 以 喜 号 分 隔 。 


例如 ， 将 数组 转换 成 字符 串 。 代 码 如 下 : 


01 vararr=new Array("a","b","c","d","e","f"); /定义 数组 

02 document.write(arr.toString()); // 输 出 转换 后 的 字符 串 
运行 结果 为 : 

a,b,c,d,e,f 


2. toLocaleString() 方 法 

toLocaleString() 方 法 将 数组 转换 成 本 地 字符 串 。 
语法 如 下 : 

arrayObject.toLocaleString() 

参数 说 明 。 

arrayObject: 必 选 项 。 数 组 名 称 。 

返回 值 : 以 本 地 格式 的 字符 串 显示 的 数组 对 象 。 


/ 
CO 说 明 
该 方法 首先 调用 每 个 数组 元 素 的 toLocaleString0 方 法 ， 然 后 使 用 地 区 特定 的 分 隔 符 把 生成 的 字 
符 串 连接 起 来 ， 形 成 一 个 字符 串 。 


例如 ， 将 数组 转换 成 用 “,” 号 分 隔 的 字符 串 。 代 码 如 下 : 


01 vararr=new Array("a","b","c","d","e","f"); /定义 数组 

02 document.write(arr.toLocaleString()); /| 输出 转换 后 的 字符 串 
运行 结果 为 : 

a,b, c,d,e,f 

3. join() 方 法 


join0 方 法 将 数组 中 的 所 有 元 素 放 入 一 个 字符 串 中 。 
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语法 如 下 : 
arrayObject.join(separator) 


参数 说 明 。 

回 arrayObject: 必 选 项 。 数 组 名 称 。 

回 separator: 可 选项 。 指 定 要 使 用 的 分 隔 符 。 如 果 省 略 该 参数 ， 则 使 用 逗号 作为 分 隔 符 。 

返回 值 : 返回 一 个 字符 串 。 该 字符 串 是 把 arrayObject 的 每 个 元 素 转换 为 字符 串 ， 然 后 把 这 些 字符 
串 用 指定 的 分 隔 符 连 接 起 来 。 

例如 ， 以 指定 的 分 隔 符 将 数组 中 的 元 素 转换 成 字符 串 。 代 码 如 下 : 


01 vararr=new Array("a","b","c","d","e","f"); /定义 数组 

02 document.write(arr.join("#")); /输出 转换 后 的 字符 串 
运行 结果 为 : 

a#b#c#d#e#f 


7.6 实 战 


7.6.1 输出 购物 车 中 的 商品 信息 


将 购物 车 中 的 商品 名 称 、 商 品 单价 以 及 商品 数量 分 别 定 义 在 数组 中 , 应 用 for 循 环 语句 和 数组 的 length 
属性 循环 输出 商品 的 名 称 、 单 价 、 数 量 、 各 商品 的 总 价 以 及 所 有 商品 合计 金额 , 运行 结果 如 图 7.18 所 示 。 
( 实例 位 置 : 资源 包 \ 源 码 \07\ 实 战 \01 ) 


@S 国 E\code1moo03Wn -| 坷 芝 sm 总 DR 


文件 四 ”要强 全) 豆 要 0) 皮 硬 (A) 工具 了 D 大 有 (HH) 
1 商品 名 称 | 商品 单价 | 商品 数量 ”| 商品 总 价 
| 华为 荣 爆 5c | 。 3999 32997 
| 电 饭 保 ¥166 ¥332 
I 华硕 笔记 本 | 。 ¥3600 ¥7200 
| 合计 : R0529 | 


图 7.18 输出 商品 信息 以 及 所 有 商品 合计 金额 
7.6.2 输出 周 星 星 的 期 末 考 试 成 绩 
周 星 星 的 期 末 考 试 成 绩 为 : 数学 80 分 、 语 文 85 分 、 英 语 76 分 、 物 理 91 分 、 化 学 88 分 ， 对 周 星 


星 的 考试 成 绩 进行 升序 排列 ， 将 结果 输出 在 表格 中 ， 运 行 结果 如 图 7.19 所 示 。( 实例 位 置 : 资源 包 \ 源 
码 \07\ 实 战 \02 ) 
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图 719 将 考试 成 绩 进 行 升序 排列 
7.7 水 结 


本 章 主要 讲解 了 JavaScript 中 的 数组 , 数组 在 JavaScript 中 的 应 用 是 非常 广泛 的 。 通 过 本 章 的 学 习 ， 
读者 可 以 了 解数 组 的 简单 应 用 。 


第 章 


String 对 象 


( 僵 视频 讲解 : 小 时 5 分 钟 ) 


在 任何 的 编程 语言 中 ， 字 符 串 、 数 值 和 布尔 值 都 是 基本 的 数据 类 型 。 在 
JavaScript 中 ， 使 用 String 对 象 可 以 对 字符 囊 进行 处 理 。 本 章 将 对 字符 串 对 象 的 创 
建 ， 以 及 字符 串 对 象 的 属性 和 方法 进行 详细 介绍 。 

通过 学 习 本 章 ， 读 者 主要 事 握 以 下 内 容 : 

MW String 对 象 的 创建 方法 

WI String 对 象 的 属性 

”String 对 象 的 常用 方法 


第 8 章 String 对 象 


8.1 String 对象 的 创建 


String 对 象 是 动态 对 象 ， 使 用 构造 函数 可 以 显 式 创建 字符 串 对 象 。String 对 象 用 于 操纵 和 处 理 文本 
可 以 通过 该 对 象 在 程序 中 获取 字符 串 长 度 、 提 取 子 字符 串 ， 以 及 将 字符 串 转换 为 大 写 或 小 写字 符 。 
语法 如 下 : 

var newstr=new String(StringText) 


参数 说 明 。 

回 newstr: 创建 的 String 对 象 名 。 

回 ”StringText: 可 选项 。 字 符 串 文本 。 

例如 ， 创 建 一 个 String 对 象 。 代 码 如 下 : 

var newstr=new String(" 飞 雪 连 天 射 白 鹿 ， 笑 书 神 侠 倚 医 鸳 "); /创建 字符 串 对 象 

实际 上 ，JavaScript 会 自动 在 字符 串 与 字符 串 对 象 之 间 进 行 转换 。 因 此 ， 任 何 一 个 字符 串 常量 (用 
单 引 号 或 双 引 号 括 起 来 的 字符 串 ) 都 可 以 看 作 是 一 个 String 对 象 ， 可 以 将 其 直接 作为 对 象 来 使 用 ， 只 
要 在 字符 变量 的 后 面 加 “.”， 便 可 以 直接 调用 String 对 象 的 属性 和 方法 。 字 符 串 与 String 对 象 的 不 同 在 
于 返回 的 typeof 值 ， 前 者 返回 的 是 string 类 型 ， 后 者 返回 的 是 object 类 型 。 


8.2 String 对 象 的 属性 


视频 讲解 


在 String 对 象 中 有 3 个 属性 ， 分 别 是 length、constructor 和 prototype。 下 面 对 这 几 个 属性 进行 详细 
介绍 。 


8.2.1 length 属性 


length 属性 用 于 获得 当前 字符 串 的 长 度 。 该 字符 串 的 长 度 为 字符 串 中 所 有 字符 的 个 数 ， 而 不 是 字 节 
数 〈 一 个 英文 字符 占 一 个 字 节 ， 一 个 中 文字 符 占 两 个 字 节 )。 

语法 如 下 : 

stringObject.length 

参数 说 明 。 

stringObject: 当前 获取 长 度 的 String 对 象 名 ， 也 可 以 是 字符 变量 名 。 


/ 
C5 培 明 
: 通过 length 属性 返回 的 字符 串 长 度 包 括 字符 串 中 的 空格 。 


例 
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如 ， 获 取 已 创建 的 字符 串 对 象 newString 的 长 度 。 


var newString=new String("abcdefg"); 
var p=newString.length; 
alert(p); 


代码 如 下 : 


// 创 建 字符 串 对 象 
/获取 字符 串 对 象 的 长 度 
/| 输出 字符 串 对 象 的 长 度 


例如 ， 获 取 自 定义 的 字符 变量 newStr 的 长 度 。 代 码 如 下 : 


01 
02 
03 


运 
7 
【 


var newStr="abcdefg"; 
var p=newStr.length; 
alert(p); 


行 结果 为 : 


例 8.01】 金庸 先 生 的 武侠 小 说 深 受 广大 武侠 迷 们 的 喜爱 ， 在 小 说 中 无 论 是 正面 人 物 还 是 反面 
人 物 都 很 有 特色 。 现 提取 小 说 中 的 一 些 主要 人 物 ， 如 张无忌 、 郭 靖 、 东 方 不 败 、 乔 峰 、 令 狐 冲 、 完 颜 


洪 烈 、 杨 过 、 金 轮 法 王 、 韦 小 宝 。 


将 以 上 人 物 按 名 称 的 字数 进行 分 类 ， 并 将 分 类 结果 输出 在 页 面 中 。 代 码 如 下 :〈 实例 位 置 : 资源 包 \ 


源码 \08\8.01) 
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01 
02 


03 
04 
05 
06 
07 


/定义 人 物 数组 


var arr=new Array(" 张 无 忌 "," 郭 靖 "," 东 方 不 败 "," 乔 峰 "," 令 狐 冲 "," 完 颜 洪 烈 "," 杨 过 "," 金 轮 法 王 "， 


"韦小宝 "); 
var twoname="™"; 
var threename=""; 
var fourname="™; 
for(var i=0; i<arr.length; i++)f{ 
if(arrli].length==2X{ 
twoname+=arr[i]j+" "; 


- 
if(arrli].length==3X{ 
threename+=arr[fi]+" "; 


4 
if(arrli].length==4X{ 
fourname+=arr[i]+" "; 


} 


: 
document.write(" 二 字 人 物 : "+twoname); 


document.write("<br> 三 字 人 物 : "+threename); 


document.write("<br> 四 字 人 物 : "+foumame); 


行程 序 ， 结 果 如 图 8.1 所 示 。 


/定义 一 个 字符 串 变 量 
/获取 字符 串 变量 的 长 度 
/输出 字符 串 变量 的 长 度 


/初始 化 二 字 人 物 变量 
/初始 化 三 字 人 物 变量 
/初始 化 四 字 人 物 变量 


/如果 人 物 名 称 长 度 为 2 
// 将 人 物 名 称 连接 在 一 起 


// 如 果 人 物 名 称 长 度 为 3 
// 将 人 物 名 称 连接 在 一 起 


/如 果 人 物 名 称 长 度 为 4 
// 将 人 物 名 称 连 接 在 一 起 


/输出 二 字 人 物 
/输出 三 字 人 物 
/输出 四 字 人 物 


第 8 章 String 对 象 


司 ENCodest7WlVine D7 C | 感 为 全 襄 小 汽 人 物 名 称 -. 
壮志 (E) ， 豆 看 (V)。 收 号 关内 工具 四 大 动 (H) 
” 三 字 人 物 : 郭靖 乔 妖 杨过 ey 


神 韦小宝 


张 无 喜 令 狐 # 。 
Hv 2 四 宇 人物 ， 东 方 不 败 完 颜 洪 烈 金 轮 法 王 学 ， 


图 8.1 为 金庸 小 说 人 物 名 称 按 字数 分 类 
8.2.2 ”constructor 属性 


constructor 属性 用 于 对 当前 对 象 的 构造 函数 的 引用 。 
语法 如 下 : 

stringObject.constructor 

参数 说 明 。 

stringObject: String 对 象 名 或 字符 变量 名 。 

例如 ， 使 用 constructor 属性 判断 当前 对 象 的 类 型 。 代 码 如 下 : 


01 varnewStr=new String("One World One Dream"); /创建 字符 串 对 象 
02 if (newStr.constructor==String}{ // 判 断 当 前 对 象 是 否 为 字符 串 对 象 
03 alert(" 这 是 一 个 字符 串 对 象 "); // 输 出 字符 串 

云 行 结果 如 图 8.2 所 示 。 


8.2 输出 对 象 的 类 型 


/ 
C5 涪 明 
以 上 例子 中 的 newStr 对 象 ， 可 以 用 字符 串 变 量 代替 。constructor 属性 是 一 个 公共 属性 ， 在 Aray、 
”Date、Boolean 和 Number 对 象 中 都 可 以 调用 该 属性 ， 用 法 与 String 对 象 相同 。 


8.2.3 ”prototype 属性 


prototype 属性 可 以 为 字符 串 对 象 添加 自 定义 的 属性 或 方法 。 
语法 如 下 : 


String.prototype.name=value 
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参数 说 明 。 

name: 要 添加 的 属性 名 或 方法 名 。 

回 value: 添加 属性 的 值 或 执行 方法 的 函数 。 

例如 ， 给 String 对 象 添加 一 个 自 定义 方法 getLength， 通 过 该 方法 获取 字符 串 的 长 度 。 代 码 如 下 : 


01 String.prototype.getLength=function(X{ /定义 添加 的 方法 
02 alert(this.length); // 输 出 字符 串 长 度 
03 } 

04 var str=new String("abcdefg"); /创建 字符 串 对 象 
05 str.getLength(); // 调 用 添加 的 方法 


运行 结果 如 图 8.3 所 示 。 


8.3 输出 字符 串 的 长 度 


oh 
SO 祝 明 
prototype 属性 也 是 一 个 公共 属性 ， 在 Array、Date、Boolean 和 Number 对 象 中 都 可 以 调用 该 属 
性 ， 用 法 与 String 对 象 相同 。 


8.3 String 对 象 的 方法 


在 String 对 象 中 提供 了 很 多 处 理 字符 串 的 方法 ， 通 过 这 些 方法 可 以 对 字符 串 进 行 查找 、 截 取 、 大 
小 写 转换 以 及 格式 化 等 一 些 操作 。 下 面 分 别 对 这 些 方 法 进行 详细 介绍 。 


/ 
NC/ 涪 明 

String 对 象 中 的 方法 与 属性 ， 字 符 串 变量 也 可 以 使 用 ， 为 了 便于 读者 用 字符 串 变 量 执行 String 
对 象 中 的 方法 与 属性 ， 下 面 的 例子 都 用 字符 串 变 量 进 行 操作 。 


8.3.1 查找 字符 串 


字符 串 对 象 提供 了 几 种 用 于 查找 字符 串 中 的 字符 或 子 字符 串 的 方法 。 下 面 对 这 几 种 方法 进行 详细 
介绍 。 
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1. charAt() 方 法 

charAt0 方 法 可 以 返回 字符 串 中 指定 位 置 的 字符 。 

语法 如 下 : 

stringObject.charAt(index) 

参数 说 明 。 

回 stringObject: String 对 象 名 或 字符 变量 名 。 

回 index: 必 选 参数 。 表 示 字 符 串 中 某 个 位 置 的 数字 ， 即 字符 在 字符 串 中 的 下 标 。 


sl 
EC 培 明 
字符 串 中 第 一 个 字符 的 下 标 是 0， 因 此 ，index 参数 的 取 值 范围 是 0~string.length-1。 如 果 参 数 
index 超出 了 这 个 范围 ， 则 返回 一 个 空 字符 囊 。 


例如 ， 在 字符 串 “ 你 好 零 零 七 ， 我 是 零 零 发 ”中 返回 下 标 为 1 的 字符 。 代 码 如 下 : 


01 ”var str=" 你 好 零 零 七 ， 我 是 零 零 发 "; /定义 字符 串 
02 document.write(str.charAt(1)); /| 输出 字符 串 中 下 标 为 1 的 字符 
查找 过 程 示意 图 如 图 8.4 所 示 。 


你 | 好 | 零 | 零 | 七 | ，| 我 | 是 | 零 | 零 | 发 
| 
ft 


下 标 为 1 的 字符 
图 8.4 查找 字符 示意 图 


2. indexOf() 方 法 

indexOf0 方 法 可 以 返回 某 个 子 字符 串 在 字符 串 中 首次 出 现 的 位 置 。 
语法 如 下 : 

stringObject.indexOf(substring, startindex) 


参数 说 明 。 
回 stringObject: String 对 象 名 或 字符 变量 名 。 

substring: 必 选 参数 。 要 在 字符 串 中 查找 的 子 字符 串 。 

startindex : 可 选 参数 。 用 于 指定 在 字符 串 中 开始 查找 的 位 置 。 它 的 取 值 范围 是 0 到 
stringObjectlength-1。 如 果 省 略 该 参数 ， 则 从 字符 串 的 首 字符 开始 查找 。 如 果 要 查找 的 子 字符 
串 没有 出 现 ， 则 返回 -1。 


回 
器 


请 
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例如 ， 在 字符 串 “ 你 好 零 零 七 ， 我 是 零 零 发 ”中 进行 不 同 的 检索 。 代 码 如 下 : 


01 var str=" 你 好 零 零 七 ， 我 是 零 零 发 "， // 定 义 字符 串 

02 document.write(str.indexOf(" 零 ")+"<br>"); // 输 出 字符 “ 零 ” 在 字符 串 中 首次 出 现 的 位 置 

03 /输出 字符 “ 零 ” 在 下 标 为 4 的 字符 后 首次 出 现 的 位 置 

04 document.write(str.indexOf(" 零 ",4)+"<br>"); 

05 ”document.write(str.indexOf(" 零 零 八 ")); // 输 出 字符 “ 零 零 八 ”在 字符 串 中 首次 出 现 的 位 置 


查找 过 程 示意 图 如 图 8.5 所 示 。 


次 出 现 的 位 置 ”字符 “ 零 ” 在 下 标 为 4 的 
字符 后 首次 出 现 的 位 置 


图 8.5 查找 字符 示意 图 


运行 结果 为 : 
2 
8 


-1 


【 例 8.02】 有 这 样 一 段 绕口令 : 四 是 四 ， 十 是 十 ， 十 四 是 十 四 ， 四 十 是 四 十 。 应 用 String 对 象 
中 的 indexOf0 方 法 获取 字符 “四 ”在 绕口令 中 的 出 现 次 数 。 代码 如 下 : ( 实例 位 置 : 资源 包 \ 源 码 \08\8.02 ) 


01 ”var str=" 四 是 四 ， 十 是 十 ， 十 四 是 十 四 ， 四 十 是 四 十 "， ”// 定 义 字符 串 


02 var position=0; /字符 在 字符 串 中 出 现 的 位 置 
03 var num=-1; /字符 在 字符 串 中 出 现 的 次 数 
04 varindex=0; // 开 始 查找 的 位 置 

05 while(position!=-1X{ 

06 position=str.indexOf(" 四 ",index); // 获 取 指 定 字符 在 字符 串 中 出 现 的 位 置 
07 Num+=1; // 将 指定 字符 出 现 的 次 数 加 1 
08 index=position+1; /指定 下 次 查找 的 位 置 

09 } 

10 ”document.write(" 定 义 的 字符 串 : "+str+"<br>"); // 输 出 定义 的 字符 串 

11 ”document.write(" 字 符 串 中 有 "+num+" 个 四 "); // 输 出 结果 

运行 程序 ， 结 果 如 图 8.6 所 示 。 


【< 疾 加 EAC 


Err 


和 彤 六 
图 8.6 输出 指定 字符 在 字符 串 中 的 出 现 次 数 


3. lastlndexOf() 方 法 
lastIndexOf0 方 法 可 以 返回 某 个 子 字符 串 在 字符 串 中 最 后 出 现 的 位 置 。 
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语法 如 下 : 
stringObject.lastIndexOf(substring, startindex) 


参数 说 明 。 

回 stringObject: String 对 象 名 或 字符 变量 名 。 

substring: 必 选 参数 。 要 在 字符 串 中 查找 的 子 字符 串 。 

startindex: 可 选 参数 。 用 于 指定 在 字符 串 中 开始 查找 的 位 置 ， 在 这 个 位 置 从 后 向 前 查找 。 它 
的 取 值 范围 是 0 到 stringObijectlength-1。 如 果 省 略 该 参数 ， 则 从 字符 串 的 最 后 一 个 字符 开始 
查找 。 如 果 要 查找 的 子 字符 串 没有 出 现 ， 则 返回 -1。 

例如 ， 在 字符 串 “ 你 好 零 零 七 ， 我 是 零 零 发 ”中 进行 不 同 的 检索 。 代 码 如 下 : 

01 ”var str=" 你 好 零 零 七 ， 我 是 零 零 发 "; // 定 义 字符 串 

02 document.write(str.lastiIndexOf(" 零 ")+"<br>"); // 输 出 字符 “ 零 ” 在 字符 串 中 最 后 出 现 的 位 置 
03 ”// 输 出 字符 “ 零 ” 在 下 标 为 4 的 字符 前 最 后 出 现 的 位 置 


04 document.write(str.lastiIndexOf(" 零 ",4)+"<br>"); 
05 document.write(str.lastiIndexOf(" 零 零 八 ")); // 输 出 字符 “ 零 零 八 ” 在 字符 串 中 最 后 出 现 的 位 置 


查找 过 程 示 意图 如 图 8.7 所 示 。 


加 
回 


WV 
ft 


全 
字符 “ 零 ” 在 下 标 为 4 的 。 字符 “ 零 ” 最 后 出 现 的 位 置 
字符 前 最 后 出 现 的 位 置 


8.7 查找 字符 示意 图 
运行 结果 为 : 


9 
3 
-1 


8.3.2 截取 字符 串 


在 字符 串 对 象 中 提供 了 几 种 截取 字符 串 的 方法 ， 分 别 是 slice0、substr0 和 substring0。 下 面 分 别 进 
行 详细 介绍 。 

1. slice() 方 法 

slice0 方 法 可 以 提取 字符 串 的 片断 ， 并 在 新 的 字符 串 中 返回 被 提取 的 部 分 。 

语法 如 下 : 


stringObject.slice(startindex,endindex) 
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参数 说 明 。 

回 stringObject: String 对 象 名 或 字符 变量 名 。 

startindex: 必 选 参数 。 指 定 要 提取 的 字符 串 片断 的 开始 位 置 。 该 参数 可 以 是 负数 ， 如 果 是 负 
数 ， 则 从 字符 串 的 尾部 开始 算 起 。 也 就 是 说 ，-1 指 字符 串 的 最 后 一 个 字符 ，-2 指 倒数 第 二 个 
字符 ， 以 此 类 推 。 

回 endindex: 可 选 参数 。 指 定 要 提取 的 字符 串 片 断 的 结束 位 置 。 如 果 省 略 该 参数 ， 表 示 结 束 位 置 
为 字符 串 的 最 后 一 个 字符 。 如 果 该 参数 是 负数 ， 则 从 字符 串 的 尾部 开始 算 起 。 


MT 


使 用 slice() 方 法 提取 的 字符 串 片 断 中 不 包括 endindex 下 标 所 对 应 的 字符 。 


例如 ， 在 字符 串 “你 好 JavaScript” 中 提取 子 字符 串 。 代 码 如 下 : 


01 var str=" 你 好 JavaScript"; // 定 义 字符 串 

02 document.write(str.slice(2)+"<br>"); // 从 下 标 为 2 的 字符 提取 到 字符 串 末 尾 

03 document.write(str.slice(2,6)+"<br>"); // 从 下 标 为 2 的 字符 提取 到 下 标 为 5 的 字符 
04 document.write(str.slice(0,-6)); // 从 第 一 个 字符 提取 到 倒数 第 7 个 字符 
提取 过 程 示 意图 如 图 8.8 所 示 。 


下 标 为 0 到 倒数 第 7 个 字符 
~ 
你 | 好 | J|aljvilalsljclrliIlplt 
| 
臣下 
下 标 为 2 到 下 标 为 5 的 字符 


下 标 为 2 到 字符 串 末 尾 的 字符 
图 8.8 提取 字符 示意 图 
运行 结果 为 : 
JavaScript 
Java 
你 好 Java 


2. substr() 方 法 

substr0 方 法 可 以 从 字符 串 的 指定 位 置 开始 提取 指定 长 度 的 子 字符 串 。 

语法 如 下 : 

stringObject.substr(startindex,length) 

参数 说 明 。 

stringObject: String 对 象 名 或 字符 变量 名 。 

回 startindex: 必 选 参数 。 指 定 要 提取 的 字符 串 片断 的 开始 位 置 。 该 参数 可 以 是 负数 ， 如 果 是 负 
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数 ， 则 从 字符 串 的 尾部 开始 算 起 。 
回 length: 可 选 参数 。 用 于 指定 提取 的 子 字符 串 的 长 度 。 如 果 省 略 该 参数 ， 表 示 结 束 位 置 为 字符 
串 的 最 后 一 个 字符 。 


生 s 注 意 
由 于 浏览 器 的 兼容 性 问题 ，substr( 方 法 的 第 一 个 参数 不 建议 使 用 负数 。 


例如 ， 在 字符 串 “ 你 好 JavaScript” 中 提取 指定 个 数 的 字符 。 代 码 如 下 : 


01 ”var str=" 你 好 JavaScript"; // 定 义 字符 串 

02 document.write(str.substr(2)+"<br>"); // 从 下 标 为 2 的 字符 提取 到 字符 串 末 尾 
03 document.write(str.substr(2,4)); /从 下 标 为 2 的 字符 开始 提取 4 个 字符 
运行 结果 为 : 

JavaScript 

Java 


【 例 8.03】 在 开发 Web 程序 时 ， 为 了 保持 整个 页 面 的 合理 布局 ， 经 常 需要 对 一 些 〈 例 如 ， 公 告 
标题 、 公 告 内 容 、 文 章 的 标题 、 文 章 的 内 容 等 ) 超 长 输出 的 字符 串 内 容 进 行 截取 ， 并 通过 “.…” 代 替 
省 略 内 容 。 本 实例 将 应 用 substr0 方 法 对 网 站 公告 标题 进行 截取 并 输出 。 代 码 如 下 : 〈 实例 位 置 : 资源 
包 \ 源 码 \08\8.03 ) 

01 <scripttype="text/javascript"> 

02 ”var str1=" 明 日 科技 即将 重 磅 推出 零 基础 学 系列 课程 "; // 定 义 公 告 标题 字符 串 


03 ”var str2=" 阴 日 商城 热烈 欢迎 新 老 朋友 光临 惠顾 "， ”// 定 义 公告 标 题字 符 串 
04 ”var str3=" 本 网 站 所 有 商品 让 利 销售 欢迎 订购 "; // 定 义 公告 标题 字符 串 


05 ”var str4=" 所 有 电子 商品 一 律 5 折 销 售 "; /定义 公告 标题 字符 串 

06 function subStr(str){ 

07 if(str.length>10X // 如 果 字符 串 长 度 大 于 10 

08 return str.substr(0,10)+"..."; // 返 回 字符 串 前 10 个 字符 ， 然 后 输出 省 略 号 
09 jelsef // 如 果 字 符 串 长 度 不 大 于 10 

10 return str; /直接 返 回 该 字符 串 

和 } 

1 

13 </script> 


14 <body background="images/bg.jpeg"> 
15 <div class="public"> 


16 <ul> 

8 <script type="text/javascript"> 

18 document.write("<li>"+subStr(str1)+"</li>"); ”// 输 出 截取 后 的 公告 标题 
19 document.write("<li>"+subStr(str2)+"</li>"); /输出 截取 后 的 公告 标题 
20 document.write("<li>"+subStr(str3)+"</li>"); ”// 输 出 截取 后 的 公告 标题 
21 document.write("<li>"+subStr(str4)+"</li>"); /输出 截取 后 的 公告 标题 
22 </script> 

23 </ul> 

24 </div> 

25 </body> 
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运行 程序 ， 结 果 如 图 8.9 所 示 。 


【< BCT EE 


文件 四 ” 堵 强 全 ) ”可 要 (V) 效 营 天 (A) 工具 四 帮助 (HH) 


商城 公告 
#* PLACARD 


”明日 科技 即将 重 磅 推出 
"明日 商城 热烈 欢迎 新 老 
， 本 网 站 所 有 商品 让 利 消 
”所 有 电子 商品 一 律 浙 


图 8.9 截取 网 站 公告 标题 
3. substring() 方 法 
substring() 方 法 用 于 提取 字符 串 中 两 个 指定 的 索引 号 之 间 的 字符 。 
语法 如 下 : 
stringObject.substring(startindex,endindex) 
参数 说 明 。 
回 stringObject，String 对 象 名 或 字符 变量 名 。 
回 startindex: 必 选 参数 。 一 个 非 负 整 数 ， 指 定 要 提取 的 字符 串 片 断 的 开始 位 置 。 
回 endindex: 可 选 参数 。 一 个 非 负 整数 , 指定 要 提取 的 字符 串 片断 的 结束 位 置 。 如 果 省 略 该 参数 ， 
表示 结束 位 置 为 字符 串 的 最 后 一 个 字符 。 
of 


6 说 田 
使 用 substring0 方 法 提取 的 字符 串 片断 中 不 包括 endindex 下 标 所 对 应 的 字符 。 


例如 ， 在 字符 串 “ 你 好 JavaScript” 中 提取 子 字 符 串 。 代 码 如 下 : 

01 ”var str=" 你 好 JavaScript"; /定义 字符 串 

02 document.write(str.substring(2)+"<br>"); /从 下 标 为 2 的 字符 提取 到 字符 串 末尾 

03 document.write(str.substring(2,6)+"<br>"); /从 下 标 为 2 的 字符 提取 到 下 标 为 5 的 字符 
运行 结果 为 : 


JavaScript 
Java 


8.3.3 ”大 小 写 转换 


在 字符 串 对 象 中 提供 了 两 种 用 于 对 字符 串 进行 大 小 写 转换 的 方法 ， 分 别 是 toLowerCase0 和 
toUpperCase0。 下 面 对 这 两 种 方法 进行 详细 介绍 。 
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se() 方 法 


toLowerCase() 方 法 用 于 把 字符 串 转 换 为 小 写 。 


语法 如 下 : 


stringObject.toLowerCase!() 


参数 说 明 。 


stringObject: String 对 象 名 或 字符 变量 名 。 
例如 ， 将 字符 串 “MJH My Love” 中 的 大 写字 母 转换 为 小 写 。 代 码 如 下 : 


01 var str="MJH My Love"; /定义 字符 串 
02 ”document.write(str.toLowerCase()); /将 字符 串 转换 为 小 写 


运行 结果 为 : 


mjh my love 


2. toUpperCase() 方 法 
toUpperCase() 方 法 用 于 把 字符 串 转换 为 大 写 。 


语法 如 下 : 


stringObject.toUpperCase() 


参数 说 明 。 


stringObject: String 对 象 名 或 字符 变量 名 。 
例如 ， 将 字符 串 “MJH My Love” 中 的 小 写字 母 转换 为 大 写 。 代 码 如 下 : 


01 var str="MJH My Love"; /定义 字符 串 

02 document.write(str.toUpperCase()); /将 字符 串 转换 为 大 写 
运行 结果 为 : 

MJH MY LOVE 


8.3.4 连接 和 拆 分 

在 字符 串 对 象 中 还 提供 了 两 种 用 于 连接 和 拆 分 字符 串 的 方法 ， 分 别 是 concatO 和 split)。 下 了 
两 种 方法 进行 详细 介绍 。 

1. concat() 方 法 

concat0 方 法 用 于 连接 两 个 或 多 个 字符 串 。 


语法 如 下 : 


stringObject.concat(stringX ,stringX,...) 


硬 对 这 
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参数 说 明 。 
stringObject: String 对 象 名 或 字符 变量 名 。 
回 stringX: 必 选 参数 。 将 被 连接 的 字符 串 ， 可 以 是 一 个 或 多 个 。 


人 io 注 起 
使 用 concat( 方 法 可 以 返回 连接 后 的 字符 串 ， 而 原 字符 事 对 象 并 没有 改变 。 


例如 ， 定 义 两 个 字符 串 ， 然 后 应 用 concat0 方 法 对 两 个 字符 串 进 行 连接 。 代 码 如 下 : 


01 var nickname=new Array(" 东 收 "," 西 毒 "," 南 帝 "," 北 丐 "); /定义 人 物 绰号 数组 

02 ”var name=new Array(" 黄 药师 "," 欧 阳 锋 "," 段 智 兴 "," 洪 七 公 "); /定义 人 物 姓 名 数组 

03 for(vari=0;i<nickname.length;i++){ 

04 document.write(nickname[i].concat(name[i])+"<br>"); // 对 人 物 绰号 和 人 物 姓名 进行 连接 
05 } 

运行 结果 为 : 


东 那 黄 药 师 
西 毒 欧阳 锋 
南 帝 段 智 兴 
北 丐 洪 七 公 


2. split() 方 法 

split0 方 法 用 于 把 一 个 字符 串 分 割 成 字符 串 数组 。 
语法 如 下 : 

stringObject.split(separator,limit) 


参数 说 明 。 

加 ”stringObject: String 对 象 名 或 字符 变量 名 。 

回 separator: 必 选 参数 。 指 定 的 分 割 符 。 如 果 把 空 字符 串 〈"") 作为 分 割 符 ， 那 么 字符 串 对 象 中 
的 每 个 字符 都 会 被 分 割 。 

回 limit， 可 选 参数 。 该 参数 可 指定 返回 的 数组 的 最 大 长 度 。 如 果 设 置 了 该 参数 ， 返 回 的 数组 元 素 
个 数 不 会 多 于 这 个 参数 。 如 果 省 略 该 参数 ， 整 个 字符 串 都 会 被 分 割 ， 不 考虑 数组 元 素 的 个 数 。 

例如 ， 将 字符 串 “Ilike JavaScript” 按 照 不 同方 式 进行 分 割 。 代 码 如 下 : 


01 var str="| like JavaScript"; /定义 字符 串 

02 document.write(str.split(" ")+"<br>"); /以 空格 为 分 割 符 对 字符 串 进行 分 割 

03 document.write(str.split(™)+"<br>"); /以 空 字符 串 为 分 割 符 对 字符 串 进行 分 割 

04 document.write(str.split(" ",2)); /以 空格 为 分 割 符 对 字符 串 进行 分 割 并 返回 两 个 元 素 
运行 结果 为 : 

llike,JavaScript 


1 ,i,k,e, ,J,a,v,a,S,c,ni,p,t 
l,like 
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【 例 8.04】 《水 浒 传 》 是 我 国 古典 四 


大 名 著 之 一 ， 书 中 对 宋江 、 卢 俊 义 、 林 冲 、 鲁 智 深 、 武松 
等 主要 人 物 都 作 了 详细 的 描写 。 现 将 这 5 个 人 物 的 名 称 、 绰 号 和 主要 事迹 分 别 定义 在 3 个 字符 串 中 ， 


各 个 人 物 、 绰 号 和 主要 事迹 以 逗号 “, ”进行 分 隔 ， 应 用 split0 方 法 和 for 循环 语句 将 这 些 人 物 信息 输 
出 在 表格 中 。 代 码 如 下 : (〈 实例 位 置 : 资源 包 \ 源 码 \08\8.04 ) 


01 <table cellspacing="1" bgcolor="#999999"> 


02 <tr height="30" bgcolor="#FFFFFF"> 


03 <th align="center" width="100"> 人 物 名 称 </th> 
04 <th align="center" width="100"> 人 物 绰 号 </th> 
05 <th align="center" width="160"> 主 要 事迹 </th> 


06 </tr> 
07 <scripttype="text/javascript"> 


08 ”var name=" 宋 江 ， 卢 俊 义 ， 林 冲 ， 鲁 智 深 ， 武 松 "; 
09 “var nickname=" 及 时 雨 ， 玉 麒麟 ， 豹 子 头 ， 花 和 尚 ， 行 者 "; 


10 /定义 主要 事迹 字符 串 


/定义 人 物 名 称 字符 串 
/定义 人 物 绰号 字符 串 


11 “var story= "领导 梁山 起 义 ， 活 捉 史 文 恭 ， 风 雪山 神 庙 ， 倒 拔 垂 杨柳 ， 醉 打 薪 门 神 "; 


12 var nameArray=name.split("，"); 

13 varnicknameArray=nickname.split(","); 
14 var storyArray=story.split(", "); 

15 for(vari=0;i<nicknameArray.length;i++X{ 


16 document.write("<tr height=26 bgcolor=#FFFFFF'>"); 

村 document.write("<td align='center>"+nameArray[i]j+"</td>"); 
18 document.write("<td align='center>"+nicknameArray[]+"</td>");，// 输 出 人 物 绰号 
19 document.write("<td align='center’>"+storyArray[i]+"</td>"); 


20 document.write("</tr>"); 
全 

22 </script> 

23 </table> 


// 将 人 物 名 称 字符 串 分 割 为 数组 
// 将 人 物 绰号 字符 串 分 割 为 数组 
// 将 主要 事迹 字符 串 分 割 为 数组 


// 输 出 <tr> 标 记 
/| 输出 人 物 名 称 


/| 输出 主要 事迹 
// 定 义 </tr> 结 束 标 记 


[<-】 le EACode\SL\07\04inc 六 - C | 靖 术 二季 双人 


文件 昌 ”区 加 {E) ”查看 (Vj 次 营 交 A) 工具 中 帮助 (H) 


| 

| 宋江 
| ” 卢 俊 义 
| 


及 时 十 
王 前 齿 
豹子 头 
花 和 沿 

行者 


人 物 名 称 | 人 物 绰 呈 | 


主要 事迹 
领导 梁山 起 义 
活捉 史 文 藉 
风 雪 山神 庙 
倒 技 垂 杨柳 
酬 打 笠 门神 


| 
| 
| 
| 
| 
| 


图 8.10 输出 梁山 好 汉人 物 信息 


8.3.5 格式 化 字符 串 


在 字符 串 对 象 中 还 有 一 些 用 来 格式 化 字符 串 的 方法 ， 这 些 方法 如 表 8.1 所 示 。 
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表 8.1 String 对 象 中 格式 化 字符 串 的 方法 


方 ” 法 说 明 

anchorO 创建 HTML 锚 

big0 使 用 大 号 字体 显示 字符 串 

smallO 使 用 小 字号 来 显示 字符 串 

fontsize0 使 用 指定 的 字体 大 小 来 显示 字符 串 

bold0 使 用 粗 体 显示 字符 串 

italics0 使 用 斜体 显示 字符 串 

linkO 将 字符 串 显示 为 链接 

strike0 使 用 删除 线 来 显示 字符 串 

blinkO 显示 闪 动 字符 串 ， 此 方法 不 支持 正 浏览 器 

fixedO 以 打字 机 文本 显示 字符 串 ， 相 当 于 在 字符 串 两 端 增加 <tt> 标 签 

fontcolor0 使 用 指定 的 颜色 来 显示 字符 串 

sub0 把 字符 串 显 示 为 下 标 

sup0 把 字符 串 显 示 为 上 标 
例如 ， 将 字符 串 “ 你 好 JavaScript” 按 照 不 同 的 格式 进行 输出 。 代 码 如 下 : 
01 ”var str=" 你 好 JavaScript"; /定义 字符 串 
02 ”document.write(" 原 字符 串 : "+str+"<br>"); // 输 出 原 字符 串 
03 document.write("big: "+str.big()+"<br>"); // 用 大 号 字体 显示 字符 串 
04 document.write("small: "+str.small()+"<br>"); /用 小 号 字体 显示 字符 串 
05 document.write("fontsize: "+str.fontsize(6)+"<br>"); // 设 置 字体 大 小 为 6 
06 。 document write("bold， "+str.bold()+"<br>"); // 使 用 粗 体 显示 字符 串 
07 document.write("italics: "+str.italics()+"<br>"); // 使 用 斜体 显示 字符 串 


08 /创建 超 链接 
09 document.write("link: "+str.link("http://www.mingribook.com")+"<br>"); 


10 document.write("strike: "+str.strike()+"<br>"); /为 字符 串 添加 删除 线 

11 document.write("fixed: "+str.fixed()+"<br>"); /以 打字 机 文本 显示 字符 串 
12 document.write("fontcolor: "+str.fontcolor("blue")+"<br>"); // 设 置 字体 颜色 

13 document.write("sub: "+str.sub()+"<br>"); // 把 字符 串 显示 为 下 标 

14 document.write("sup: "+str.sup()); // 把 字符 串 显示 为 上 标 


运行 程序 ， 结 果 如 图 8.11 所 示 。 


S| seodesaormcex p+ o |B 
) 坊 纺 (E] 二 看 V) 


图 8.11 对 字符 串 进 行 格式 化 
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8.4 实 战 


8.4.1 判断 邮箱 格式 是 否 正确 


以 “@ ”字符 和 “.” 字 符 作为 依据 ， 简 单 判断 用 户 输入 的 是 否 为 有 效 的 邮箱 地 址 ， 运 行 结果 如 
图 8.12 所 示 。( 实例 位 置 : 资源 包 \ 源 码 \08\ 实 战 \01 ) 


EE EP 


ET 示 关 关内。 工具。 和 和 1) 


8.4.2 将 多 位 数字 分 位 显示 


实际 网 站 开发 过 程 中 ， 很 有 可 能 遇 到 这 样 的 情况 : 客户 要 求 将 一 串 长 数字 分 位 显示 ， 例 如 将 
“13630016” 显 示 为 “13,630,016”。 试 着 编写 一 个 自 定义 函数 ， 实 现 将 输入 的 数字 字符 格式 化 为 分 位 
显示 的 字符 串 ， 运 行 结果 如 图 8.13 所 示 。( 实例 位 置 : 资源 包 \ 源 码 \08\ 实 战 \02 ) 


笃 针 的 结果 : 13,630.016 
请 输入 要 转换 的 长 娄 字 : 


13630015 ]u13) 


多 出 | 本 


8.13 将 一 串 长 数字 分 位 显示 


8.4.3 生成 指定 位 数 的 随机 字符 串 


在 开发 网 络 应 用 程序 时 ， 经 常会 遇 到 由 系统 自动 生成 指定 位 数 的 随机 字符 串 的 情况 ， 例 如 ， 生 成 
随机 密码 或 验证 码 等 。 在 自 定义 函数 中 应 用 split0 方 法 实现 生成 指定 位 数 的 随机 字符 串 的 功能 , 运行 结 
果 如 图 8.14 所 示 。( 实例 位 置 : 资源 包 \ 源 码 \08\ 实 战 \03 ) 
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8.5 小 结 


本 章 主要 讲解 了 JavaScript 中 的 String 对 象 。 在 实际 应 用 中 字符 串 几 乎 无 处 不 在 ， 对 其 进行 处 理 是 
开发 人 员 经 常 要 面临 的 问题 。 通 过 本 章 的 学 习 ， 读 者 可 以 了 解 字符 串 对 象 的 处 理 技术 。 
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( 盒 ! 视 频 讲解 : S2 分 钟 ) 


JavaScript 是 基于 对 象 (object-based) 的 语言 。 它 的 一 个 最 基本 的 特征 是 采用 
事件 驱动 (event-driven)， 使 在 图 形 界面 环境 下 的 一 切 操作 变 得 简单 化 。 通 常 氮 标 
或 热 键 的 动作 称 之 为 事件 (Event)。 由 饼 标 或 热 键 引发 的 一 连 串 程序 动作 ， 称 之 为 
事件 驱动 (Event Driver)。 而 对 事件 进行 处 理 的 程序 或 函数 ， 称 之 为 事件 处 理 程序 
(Event Handler)。 

通过 学 习 本 章 ， 读 者 主要 党 可 以 下 内 容 : 

”JavaScript 中 的 事件 介绍 

MW 与 表单 相关 的 事件 

吕 “ 与 鼠标 和 键盘 相关 的 事件 

WI 与 页 面相 关 的 事件 
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9.1 事件 与 事件 处 理 概述 


事件 处 理 是 对 象 化 编程 的 一 个 很 重要 的 环节 ， 它 可 以 使 程序 的 逻辑 结构 更 加 清晰 ， 使 程序 更 具有 
灵活 性 ， 提 高 了 程序 的 开发 效率 。 事 件 处 理 的 过 程 分 为 3 步 : @ 发 生 事件 ，@ 启动 事件 处 理 程序 ; 
@ 事件 处 理 程序 做 出 反应 。 其 中 ， 要 使 事件 处 理 程序 能 够 启动 ， 必 须 通过 指定 的 对 象 来 调用 相应 的 事 
件 ， 然 后 通过 该 事件 调用 事件 处 理 程序 。 事 件 处 理 程序 可 以 是 任意 的 JavaScript 语句 ,但 是 一 般 用 特定 
的 自 定义 函数 (function) 来 对 事件 进行 处 理 。 


9.1.1 什么 是 事件 


事件 是 一 些 可 以 通过 脚本 响应 的 页 面 动 作 。 当 用 户 按 下 鼠标 键 或 者 提交 一 个 表单 ， 甚 至 在 页 面 上 
移动 鼠标 时 ， 事 件 会 出 现 。 事 件 处 理 是 一 段 JavaScript 代码 ， 总 是 与 页 面 中 的 特定 部 分 以 及 一 定 的 事件 
相关 联 。 当 与 页 面 特定 部 分 关联 的 事件 发 生 时 ， 事 件 处 理 器 就 会 被 调用 。 

绝 大 多 数 事件 的 命名 都 是 描述 性 的 ， 很 容易 理解 。 例 如 click、submit、mouseover 等 ， 通 过 名 称 就 
可 以 猜测 其 含义 。 但 也 有 少数 事件 的 名 称 不 易 理 解 ， 例 如 blur 英文 的 字面 意思 为 “模糊 ”)， 表 示 一 
个 域 或 者 一 个 表单 失去 焦点 。 通 常情 况 下 ， 事 件 处 理 器 的 命名 原则 是 ， 在 事件 名 称 前 加 上 前 级 on。 例 
如 ， 对 于 click 事件 ， 其 处 理 器 名 为 onClick。 


9.1.2” JavaScript 的 常用 事件 


为 了 便于 读者 查找 JavaScript 中 的 常用 事件 ， 下 面 以 表格 的 形式 对 各 事件 进行 说 明 。JavaScript 的 
相关 事件 如 表 9.1 所 示 。 


表 9.1 JavaScript 的 相关 事件 


事件 说 明 
onclick 单 击 时 触发 此 事件 
ondblclick 双击 时 触发 此 事件 
onmousedown 按 下 鼠标 时 触发 此 事件 
onmouseu 鼠标 按 下 后 松 开 时 触发 此 事件 
onmouseover 当 鼠 标 移动 到 某 对象 范 围 的 上 方 时 触发 此 事件 
人 onmousemove 鼠标 移动 时 触发 此 事件 
onmouseout 当 鼠 标 离开 某 对象 范 围 时 触发 此 事件 
onkeypress 当 键 盘 上 的 某 个 键 被 按 下 并 且 释 放 时 触发 此 事件 
onkeydown 当 键盘 上 某 个 按键 被 按 下 时 触发 此 事件 
onkeyup 当 键盘 上 某 个 按键 被 按 下 后 松 开 时 触发 此 事件 
onfocus 当 某 个 元 素 获得 焦点 时 触发 此 事件 
下 onblur 当前 元 素 失去 焦点 时 触发 此 事件 
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事 件 说 有明 

| onchange 当前 元 素 失去 焦点 并 且 元 素 的 内 容 发 生 改 变 时 触发 此 事件 
表单 相关 事件 | onsubmit 一 个 表单 被 提交 时 触发 此 事件 

| onreset 当 表单 中 RESET 的 属性 被 激活 时 触发 此 事件 

| onload 页 面 内 容 完 成 时 触发 此 事件 (也 就 是 页 面 加 载 事件 ) 
页 面相 关 事件 | onunload 当前 页 面 将 被 改变 时 触发 此 事件 


当 浏 览 器 的 窗口 大 小 被 改变 时 触发 此 事件 


Onresize 


9.1.3 事件 的 调用 


在 使 用 事件 处 理 程序 对 页 面 进行 操作 时 ， 最 主要 的 是 如 何 通过 对 象 的 事件 来 指定 事件 处 理 程序 。 
指定 方式 主要 有 以 下 两 种 。 

1. 在 HTML 中 调用 

在 HTML 中 分 配 事件 处 理 程序 ,只 需要 在 HTML 标记 中 添加 相应 的 事件 ， 并 在 其 中 指定 要 执行 的 
代码 或 是 函数 名 即 可 。 例 如 : 

<input name="save" type="button" value=" 保 存 " onclick="alert(' 单 击 了 保存 按钮 );"> 

在 页 面 中 添加 如 上 代码 ， 同 样 会 在 页 面 中 显示 “保存 ”按钮 ， 当 单 击 该 按钮 时 ， 将 弹出 “ 单 击 了 
保存 按钮 ”对 话 框 。 

上 面 的 示例 也 可 以 通过 调用 函数 来 实现 ， 代 码 如 下 : 


01 <input name="save" type="button" value=" 保 存 " onclick="clickFunction();"> 
02 <scripttype="text/javascript"> 


03 function clickFunction()f /定义 clickFunction() 函 数 
04 alert(" 单 击 了 保存 按钮"); // 弹 出 对 话 框 

05 } 

06 </script> 


2. 在 JavaScript 中 调用 
在 JavaScript 中 调用 事件 处 理 程序 ， 首 先 需要 获得 要 处 理 对 象 的 引用 ， 然 后 将 要 执行 的 处 理 函 数 赋 
值 给 对 应 的 事件 。 例 如 ， 当 单 击 “ 保 存 ” 按 钮 时 将 弹出 提示 对 话 框 ， 代 码 如 下 : 


01 <input id="save" name="save" type="button" value=" 保 存 "> 
02 <scripttype="text/javascript"> 


03 var b_save=document.getElementByld("save"); // 获 取 id 属性 值 为 save 的 元 素 
04 b_save.onclick=function(X{ /为 按钮 绑 定单 击 事件 

05 alert(" 单 击 了 保存 按钮 "); // 弹 出 对 话 框 

06 } 

07 </script> 
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在 上 面 的 代码 中 ， 一 定 要 将 “<input id="save" name="save" type="button" value=" 保 存 ">” 
JavaScript 代码 的 上 方 ， 否 则 将 无 法 正确 弹出 对 话 框 。 


上 面 的 示例 也 可 以 通过 以 下 代码 来 实现 : 


01 <form id="form1" name="form1" method="post" action="> 


02 <input id="save" name="save" type="button" value=" 保 存 "> 

03 </form> 

04 <scripttype="text/javascript"> 

05 form1.save.onclick=function(){ /为 按钮 绑 定 单 击 事件 
06 alert(" 单 击 了 保存 按钮 "); // 弹 出 对 话 框 

07 } 

08 </script> 


意 
在 JavaScript 中 指定 事件 处 理 程序 时 ， 事 件 名 称 必须 小 写 ， 才 能 正确 响应 事件 。 


9.1.4 事件 对 象 


在 下 浏览 器 中 事件 对 象 是 Window 对 象 的 一 个 属性 event， 并 且 event 对 象 只 能 在 事件 发 生 
问 ， 所 有 事件 处 理 完 后 ， 该 对 象 就 消失 了 。 而 标准 的 DOM 中 规定 event 必须 作为 唯一 的 参数 传 
处 理 函 数 。 故 为 了 实现 兼容 性 ， 通 常 采用 下 面 的 方法 : 


01 function someHandle(event){ 
02 /处理 兼容 性 ， 获 得 事件 对 象 


03 if(window.event) 
04 event=window.event; 
05 } 


在 正 中 ， 发 生 事件 的 元 素 通过 event 对 象 的 srcElement 属性 获取 ， 而 在 标准 的 DOM 浏览 
发 生 事件 的 元 素 通过 event 对 象 的 target 属性 获取 。 为 了 处 理 两 种 浏览 器 兼容 性 ， 举 例如 下 : 
01 <form id="form1" name="form1" method="post" action="> 


02 <input id="save" name="save" type="button" value=" 保 存 "> 

03 </form> 

04 <scripttype="text/javascript"> 

05 function handle(oEventX{ 

06 if(window.event) oEvent = window.event' /| 处理 兼容 性 ， 获 得 事件 对 象 
07 var oTarget; 

08 if(oEvent.srcElement) /处 理 兼容 性 ， 获 取 发 生 事件 的 元 素 
09 oTarget = oEvent.srcElement; 

10 else 

| oTarget = oEvent.target; 

12 alert(oTargettagName); // 弹 出 发 生 事件 的 元 素 标记 名 称 
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13 !) 
14 form1.save.onclick = handle; /为 按钮 绑 定 单 击 事件 
15 ”</script> 


A 
CO 祝 田 
上 面 示例 中 使 用 了 event 对 象 的 srcElement 属性 或 target 属性 在 事件 发 生 时 获取 鼠标 单 击 对 象 
的 名 称 ， 便 于 对 该 对 象 进行 操作 。 


9.2 表单 相关 事件 


去 焦点 的 元 素 样式 ， 这 里 所 指 的 元 素 可 以 是 同一 类 型 ， 也 可 以 是 多 个 不 同类 型 的 元 素 。 


9.2.1 获得 焦点 与 失去 焦点 事件 


是 当前 元 焦点 时 触发 事件 处 理 程序 。 在 一 般 情 况 下 ， 这 两 个 事件 是 同时 使 用 的 。 
【 例 9.01】 当 用 户 选 择 页 面 中 的 文本 框 时 ,改变 选中 文本 框 的 背景 颜色 ， 当 选择 其 他 文本 框 时 ， 
将 失去 焦点 的 文本 框 恢复 为 原来 的 颜色 。 代 码 如 下 :( 实例 位 置 : 资源 包 \ 源 码 \09\9.01 ) 


01 <table align="center" width="300" height="160" border="0"> 
02 <form name="form1"> 


03 <tr> 

04 <td width="80" align="right"> 用 户 名 : </td> 

05 <td width="200"> 

06 <input type="text" onFocus="txtfocus()" onBlur="txtblur()"> 
07 </td> 

08 </tr> 

09 <tr> 

10 <td align="right"> 密 码 : </td> 

sd] <td> 

这 <input type="text" onFocus="txtfocus()" onBlur="txtblur()"> 
13 </td> 

14 </tr> 

15 <tr> 

16 <td align="right"> 真 实 姓名 : </td> 

17 <td> 

18 <input type="text" onFocus="txtfocus()" onBlur="txtblur()"> 
19 </td> 

20 </tr> 

2 | <tr> 

22 <td align="right"> 性 别 : </td> 
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23 <td> 

24 <input type="text" onFocus="txtfocus()" onBlur="txtblur()"> 

25 </td> 

26 </tr> 

27 <tr> 

28 <td align="right"> 邮 箱 : </td> 

29 <td> 

30 <input type="text" onFocus="txtfocus()" onBlur="txtblur()"> 

31 </td> 

32 </tr> 

33 </form> 

34 </table> 

35 <script type="textjavascript"> 

36 function txtfocus(){ /| 当前 元 素 获得 焦点 
BE var e=window.event: // 获 取 事件 对 象 

38 var obj=e.srcElement' /获取 发 生 事件 的 元 素 
39 obj.style.background="#FF9966"; // 设 置 元 素 背 景 颜色 
40 } 

41 function txtblur(X{ // 当 前 元 素 失去 焦点 
42 var e=Window.event'; // 获 取 事 件 对 象 

43 var obj=e.srcElement' // 获 取 发 生 事件 的 元 素 
44 obj.style.background="#FFFFFF"; // 设 置 元 素 背景 颜色 
45 } 

46 </script> 


运行 程序 ， 可 以 看 到 当 文 本 框 获得 焦点 时 ， 该 文本 框 的 背景 颜色 发 生 了 改变 ， 如 图 9.1 所 示 。 当 文 
本 框 失去 焦点 时 ， 该 文本 框 的 背景 又 恢复 为 原来 的 颜色 ， 如 图 9.2 所 示 。 


个 © EACode\si\osW01\nc P -| 铭文 = 人 二 


文件 (有 奖 强 (E) 下 看 (V) 收藏 交 (A) 工具 (T) 融 动 (H) 


图 9.1 文本 框 获得 焦点 时 改变 背景 颜色 图 9.2 文本 框 失 去 焦点 时 恢复 背景 颜色 


/ 
由 于 浏览 器 的 兼容 性 ， 请 在 正 浏 览 器 中 运行 本 章 实例 。 
9.2.2 ”失去 焦点 内 容 改 变 事件 


失去 焦点 内 容 改变 事件 onchange) 是 当前 元 素 失去 焦点 并 且 元 素 的 内 容 发 生 改变 时 触发 事件 处 
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理 程序 。 该 事件 一 般 在 下 拉 菜 单 中 使 用 。 
【 例 9.02】 当 用 户 选择 下 拉 菜 单 中 的 颜色 时 ,通过 onchange 事件 来 相应 地 改变 文本 框 中 的 字体 
颜色 。 代 码 如 下 :〈 实例 位 置 : 资源 包 \ 源 码 \09\9.02 ) 


01 <formname="form1"> 

02 <inputname="textfield" type="text" size="18" value=" 零 基础 学 JavaScript"> 
03 <select name="menu1" onChange="Fcolor()"> 

04 <option value="black"> 黑 色 </option> 

05 <option value="yellow"> 黄 色 </option> 

06 <option value="blue"> 蓝 色 </option> 


07 <option value="green"> 绿 色 </option> 
08 <option value="red"> 红 色 </option> 
09 <option value="purple"> 紫 色 </option> 
10 </select> 

11 </form> 


12 <scripttype="text/javascript"> 
13 function Fcolor(){ 


14 var e=Window.event; // 获 取 事 件 对 象 

15 var obj=e.srcElement:; 1/ 获取 发 生 事件 的 元 素 

16 form1.textfield.style.color=obj.value; // 设 置 文本 框 中 的 字体 颜色 
RA: 

18 </script> 

运行 结果 如 图 9.3 所 示 。 


9.2.3 ”表单 提交 与 重 置 事件 


表单 提交 事件 (onsubmit) 是 在 用 户 提交 表单 时 (通常 
使 用 “提交 ”按钮 , 也 就 是 将 按钮 的 type 属性 设 为 submit)， 
在 表单 提交 之 前 被 触发 ， 因 此 ， 该 事件 的 处 理 程序 通过 返 
回 false 值 来 阻止 表单 的 提交 。 该 事件 可 以 用 来 验证 表单 输 
入 项 的 正确 性 。 

表单 重 置 事件 (onreset) 与 表单 提交 事件 的 处 理 过 程 相同 ， 该 事件 只 是 将 表单 中 的 各 元 素 的 值 设 
置 为 原始 值 。 一 般 用 于 清空 表单 中 的 文本 框 。 

下 面 给 出 这 两 个 事件 的 使 用 格式 : 


<form name="formname" onsubmit= "retum Funname" onreset="return Funname"></form> 


回 formmname: 表单 名 称 。 
回 ”Funname: 函数 名 或 执行 语句 ， 如 果 是 函数 名 ， 在 该 函数 中 必须 有 布尔 型 的 返回 值 。 


9.3 改变 文本 框 中 的 字体 颜色 


4 


全 注意 
如 果 在 onsubmit 和 onreset 事件 中 调用 的 是 自 定义 函数 名 , 那么 , 必须 在 函数 名 的 前 面 加 return 
: 语句 ， 否 则 ， 不 论 在 函数 中 返回 的 是 true， 还 是 false， 当 前 事件 所 返回 的 值 一 律 是 true 值 。 


【 例 9.03】 在 提交 表单 时 ， 通 过 onsubmit 事件 来 判断 提交 的 表单 中 是 否 有 空 文本 框 ， 如 果 有 空 
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文本 框 ， 则 不 允许 提交 。 代 码 如 下 : (实例 位 置 : 资源 包 \ 源 码 \09\9.03 ) 


01 <formname="form1" onsubmit="return AllSubmit()"> 
02 <!- 省 略 部 分 HTML 代码 --> 


03 <input name="sub" type="submit" id="sub2" value=" 提 交 ">&nbsp; 
04 <input type="reset" name="Submit2" value=" 重 置 "> 
05 </form> 


06 <scripttype="text/javascript"> 
07 function AllSubmit(X{ 


08 var T=true; /初始 化 变量 

09 var e=Wwindow.event; // 获 取 事 件 对 象 

10 var obj=e.srcElement; 1/ 获取 发 生 事件 的 元 素 

11 for (vari=1;i<=7;i++)f 

12 if (eval("obj."+"txt"+i).value=="™"Y{ 1/ 如果 表单 元 素 有 空 值 

13 T=false; /为 变量 T 进行 重新 赋值 

14 break; /跳出 for 循环 语句 

15 } 

16 3 

ee if (TX // 如 果 变 量 T 的 值 为 false 

18 alert(" 提 交 信 息 不 允许 为 空 "); // 弹 出 对 话 框 

19 } 

20 return T; 1/ 返回 变量 T 的 值 

1 

22 </script> 

运行 实例 ， 当 表单 中 有 空 文本 框 时 ， 单 击 “ 提 交 ” 按 钮 将 弹出 提示 信息 ， 结 果 如 图 9.4 所 示 。 
ET 


@ BE 


。。 医 您 当前 的 位 置 :网 站 信息 管理 -》 商 品 信息 泽 加 A| 


9.4 表单 提交 的 验证 


9.3 和 鼠标 键盘 事件 


鼠标 和 键盘 事件 是 在 页 面 操作 中 使 用 最 频繁 的 操作 ， 可 以 利用 鼠标 事件 在 页 面 中 实现 鼠标 移动 、 
单 击 时 的 特殊 效果 ， 也 可 以 利用 键盘 事件 来 制作 页 面 的 快捷 键 等 。 
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9.3.1 鼠标 单 击 事件 


单 击 事件 〈onclick) 是 在 鼠标 单 击 时 被 触发 的 事件 。 单 击 是 指 鼠 标 停留 在 对 象 上 ， 按 下 鼠标 键 ， 
在 没有 移动 鼠标 的 同时 放 开 鼠标 键 的 这 一 完整 过 程 。 

单 击 事件 一 般 应 用 于 Button 对 象 、Checkbox 对 象 、Image 对 象 、Link 对 象 、Radio 对 象 、Reset 对 
象 和 Submit 对 象 。Button 对 象 一 般 只 会 用 到 onclick 事件 处 理 程序 ， 因 为 该 对 象 不 能 从 用 户 那 里 得 到 
任何 信息 ， 如 果 没 有 onclick 事件 处 理 程序 ， 按 钮 对 象 将 不 会 有 任何 作用 。 


意 
在 使 用 对 象 的 单 击 事件 时 ， 如 果 在 对 象 上 按 下 鼠标 键 ， 然 后 移动 鼠标 到 对 象 外 再 松 开 鼠 标 ， 单 
击 事件 无 效 ， 单 击 事件 必须 在 对 象 上 松 开 鼠 标 后 ， 才 会 执行 单 击 事件 的 处 理 程序 。 | 
【 例 9.04】 通过 单 击 “ 变 换 背 景 ” 按钮 ,动态 地 改变 页 面 的 背景 颜色 ， 当 用 户 再 次 单 击 按钮 时 ， 
页 面 背景 将 以 不 同 的 颜色 进行 显示 。 代 码 如 下 :( 实例 位 置 : 资源 包 \ 源 码 \09\9.04 ) 
01 <scripttype="text/javascript"> 
02 varArraycolor=new Array("olive","teal","red","blue","maroon","navy","lime","fuschia", 


"green","purple","gray","yellow","aqua","white","silver"); /定义 颜色 数组 
03 var n=0; /为 变量 赋 初 值 
04 function turncolors(X{ // 自 定义 函数 
05 if(n==(Arraycolorlength-1)) n=0; // 判 断 数 组 下 标 是 否 指向 最 后 一 个 元 素 
06 N++; // 变 量 自 加 1 
07 document.bgColor = Arraycolorfn]; /设置 背景 颜色 为 对 应 数组 元 素 的 值 
08 } 
09 </script> 
10 <form name="form1" method="post" action="> 
yy 
12 <input type="button" name="Submit" value=" 变 换 背 景 " onclick="turncolors()"> 
13 </p> 
14 ”<p> 用 按钮 随意 变换 背景 颜色 </p> 
15 </form> 


运行 实例 ， 结 果 如 图 9.5 所 示 。 当 单 击 “ 变 换 背 景 ”按钮 时 ， 页 面 的 背景 颜色 就 会 发 生变 化 ， 如 图 9.6 
所 示 。 


@ D[@ excosesi varine p » © | Brim 


文件 (站 奖 纺 (EF) 可 看 (V) 站 语 夫 (A) 工具 (T) 孝 动 (H) 


变 接 冰 景 
用 按钮 随意 变换 背景 颜色 


图 9.5 ”按钮 单 击 前 的 效果 图 9.6 按钮 单 击 后 的 效果 
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9.3.2 ”鼠标 按 下 和 松 开 事件 


鼠标 的 按 下 和 松 开 事件 分 别 是 onmousedown 和 onmouseup 事件 。 其中，onmousedown 事件 用 于 在 
鼠标 按 下 时 触发 事件 处 理 程序 ，onmouseup 事件 是 在 鼠标 松 开 时 触发 事件 处 理 程序 。 在 用 鼠标 单 击 对 
象 时 ， 可 以 用 这 两 个 事件 实现 其 动态 效果 。 

【 例 9.05】 用 onmousedown 和 onmouseup 事件 将 文本 制作 成 类 似 于 <a> ( 超 链接 ) 标记 的 功能 ， 
也 就 是 在 文本 上 按 下 鼠标 时 ， 改 变 文本 的 颜色 ， 当 在 文本 上 松 开 鼠标 时 ， 恢 复 文本 的 默认 颜色 。 代 码 
如 下 :( 实例 位 置 : 资源 包 \ 源 码 \09\9.05 ) 


01 <pid="p1" style="color:#AA9900; cursor:pointer" onmousedown="mousedown()" 
onmouseup="mouseup()"><u> 零 基础 学 JavaScript</u></p> 
02 <scripttype="text/javascript"> 


03 function mousedown()f /定义 mousedown() 函 数 
04 var obj=document.getElementByld('p1"); /获取 包含 文本 的 元 素 

05 obj.style.color=W#0022AA'; /为 文本 设置 颜色 

06 } 

07 _ function mouseup(X{ /定义 mouseup() 函 数 

08 var obj=document.getElementByld('p1"); // 获 取 包 含 文本 的 元 素 

09 obij.style.color=#AA9900'; // 将 文本 恢复 为 原来 的 颜色 
10 } 

11 </script> 


运行 实例 ， 在 文本 上 按 下 鼠标 时 的 结果 如 图 9.7 所 示 ， 在 文本 上 松 开 和 鼠标 时 的 结果 如 图 9.8 所 示 。 


站 EcodevstoswsVnc D - © | © SR 回 EMCode\steW5Vnc D ~ 0 | 司 生 可 仙人 
Er CE 得 看 (V) 。 履 硬 六 (A) 工具 里 屿 (H) 文 作品 费 允 日。 得 看 ()。 交 蕙 闪 A) 工具 站 可 屿 H) 


Sat Bett 


图 9.7 按 下 鼠标 时 改变 字体 颜色 图 98 松 开 鼠 标 时 恢复 字体 颜色 
9.3.3 ”鼠标 移入 和 移出 事件 


鼠标 的 移入 和 移出 事件 分 别 是 onmouseover 和 onmouseout 事件 。 其 中 ，onmouseover 事件 在 鼠标 
移动 到 对 象 上 方 时 触发 事件 处 理 程序 ，onmouseonut 事件 在 鼠标 移出 对 象 上 方 时 触发 事件 处 理 程序 。 可 
以 用 这 两 个 事件 在 指定 的 对 象 上 移动 鼠标 时 ， 实 现 其 对 象 的 动态 效果 。 

【 例 9.06】 应 用 onmouseover 和 onmouseout 事件 实现 动态 改变 图 片 透 明度 的 功能 。 当 鼠标 移入 
图 片上 时 ,改变 图 片 的 透明 度 ， 当 鼠标 移出 图 片 时 ,将 图 片 恢复 为 初始 的 效果 。 代 码 如 下 :( 实例 位 置 : 
资源 包 \ 源 码 \09\9.06 ) 

01 <scripttype="text/javascript"> 

02 function visible(cursor,if /定义 visible() 函 数 

03 if (i==0) /如果 参数 i 的 值 为 0 
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cursor filters.alpha.opacity=100; /将 图 片 透明 度 设置 为 100 
else 
cursor.filters.alpha.opacity=50; /将 图 片 透明 度 设置 为 50 
</script> 
<table border="0" cellpadding="0" cellspacing="0"> 
<tr> 
<td align="center" bgcolor="#CCCCCC"> 
<img src="images/Temp.jpg" border="0" style="filter:alpha(opacity=100)" 
onMouseOver="Vvisible(this, 1)" onMouseOut="visible(this,0)" width="148" height="121"> 
</td> 
</tr> 
</table> 


ea Mba 


Se evcodwshoswe' OO le ecedesiosvs, [2| 


文件 (月 ”六 缠 (E) 吾 看 (V) 收藏 天 A) 工具 TT) ” 


图 9.9 鼠标 移入 时 改变 透明 度 图 9.10 鼠标 移出 时 恢复 初始 效果 


SR 四 


由 


9.3.4 


于 浏览 器 的 兼容 性 ， 该 实例 需要 在 IE 8 浏览 器 及 其 以 下 版 本 中 才能 看 到 效果 。 


鼠标 移动 事件 


鼠标 移动 事件 (onmousemove) 是 鼠标 在 页 面 上 进行 移动 时 触发 事件 处 理 程序 ， 可 以 在 该 事件 中 
用 Document 对 象 实时 读 取 鼠标 在 页 面 中 的 位 置 。 
例如 ， 当 鼠标 在 页 面 中 移动 时 ， 在 页 面 中 显示 鼠标 的 当前 位 置 ， 也 就 是 (x,y) 值 。 代 码 如 下 : 


<script type="text/javascript"> 


var x=0,y=0; /初始 化 变量 的 值 
function MousePlace(X{ 
x=window.event.x; // 获 取 横 坐标 X 的 值 
y=window.event.y; 1/ 获 取 纵 坐标 Y 的 值 
// 输 出 鼠标 的 当前 位 置 
document.getElementByld('position').innerHTML=" 鼠 标 在 页 面 中 的 当前 位 置 的 横 坐 标 X: "+x 
+" 纵 坐 标 Y: "+y; 
} 
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09 document.onmousemove=MousePlace; // 鼠 标 在 页 面 中 移动 时 调用 函数 
10 </script> 
11 <span id="position"></span> 


运行 结果 如 图 9.11 所 示 。 


ENCoce\stv 
件 (月 ” 奖 强 (E) 吾 看 V) 工具 帮助 (H) 


| 全 在 页 面 中 的 当前 位 置 的 可 标 Y，236 纳 业 村 ?65 


R 


图 9.11 在 页 面 中 显示 鼠标 的 当前 位 置 
9.3.5 键盘 事件 


键盘 事件 包含 onkeypress、onkeydown 和 onkeyup 事件 ， 其 中 onkeypress 事件 是 在 键盘 上 的 某 个 键 
被 按 下 并 且 释 放 时 触发 此 事件 的 处 理 程序 ， 一 般 用 于 键盘 上 的 单 键 操作 。onkeydown 事件 是 在 键盘 上 
的 某 个 键 被 按 下 时 触发 此 事件 的 处 理 程序 , 一 般 用 于 组 合 键 的 操作 。onkeyup 事件 是 在 键盘 上 的 某 个 键 
被 按 下 后 松 开 时 触发 此 事件 的 处 理 程序 ， 一 般 用 于 组 合 键 的 操作 。 


为 了 便于 读者 对 键盘 上 的 按键 进行 操作 ， 下 面 以 表格 的 形式 给 出 其 键 码 值 。 
键盘 上 字母 和 数字 键 的 键 码 值 如 表 9.2 所 示 。 
表 9.2， 字 母 和 数字 键 的 键 码 值 
按 键 | 键 值 | 按 键 | 键 值 | 按 键 | 键 值 | 按 键 | 键 值 

A 65 Q 2 103 Ww 119 

B 66 R 104 入 120 

妈 67 S 105 y 121 

D 68 y 106 z 122 

E 69 U 107 0 48 

F 70 V 108 1 49 

G 71 W 109 2 50 

H 72 基 110 a $1 

I 73 Y 111 4 S2 

J 74 电 112 $ $53 

K 75 a 113 6 54 

76 b 114 7 SS 

M 77 C 115 8 $56 

N 78 d 116 分 S57 

0 79 必 117 

到 80 关 118 
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数字 键盘 上 按键 的 键 码 值 如 表 9.3 所 示 。 
表 9.3 数字 键盘 上 按键 的 键 码 值 


EE ER Ce I 


键盘 上 控制 键 的 键 码 值 如 表 9.4 所 示 。 
表 9.4 控制 键 的 键 码 值 


按 键 | 键 值 


Backspace | 8 
Tob 9 | [pwmanmowd| mo | 
Clear 12 | 3 |m | 
Enter 13 
Shift 16 


Control 


息 * 注 意 
以 上 键 码 值 只 有 在 文本 框 中 才 完全 有 效 ， 如 果 在 页 面 中 使 用 (也 就 是 在 <body> 标 记 中 使 用 ) ， 
则 只 有 字母 键 、 数 字 键 和 部 份 控 制 键 可 用 ， 其 字母 键 和 数字 键 的 键 值 与 ASCII 值 相 同 。 


【 例 9.07】 利用 键盘 中 的 A 键 ， 对 页 面 进行 刷新 ， 而 无 须 用 鼠标 在 正 浏览 器 中 单 击 “刷新 ” 
按钮 。 代 码 如 下 :( 实例 位 置 : 资源 包 \ 源 码 \09\9.07 ) 


01 <scripttype="text/javascript"> 


02 function Refurbish()f /定义 Refurbish() 函 数 

03 if (window.event.keyCode==65){ /如果 按 下 了 键盘 上 的 A 键 

04 location.reload(); // 对 页 面 进行 刷新 

05 1 

06 } 

07 document.onkeydown=Refurbish; // 当 按 下 键盘 上 的 按键 时 调用 函数 
08 </script> 


09 <img src="1.jpg" width="805" height="554"> 


运行 结果 如 图 9.12 所 示 。 
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ECGECS 了 9 Bi x 


EC ID 和 


图 9.12 按 A 键 对 页 面 进行 刷新 


9.4 页 面 事件 


面 事件 是 在 页 面 加 载 或 改变 浏览 器 大 小 、 位 置 及 对 页 面 中 的 滚动 条 进行 操作 时 ， 所 触发 的 事件 
处 理 程序 。 本 节 将 通过 页 面 事件 对 浏览 器 进行 相应 的 控制 。 


9.4.1 加 载 与 卸载 事件 


加 载 事件 (onload) 是 在 网 页 加 载 完毕 后 触发 相应 的 事件 处 理 程序 ， 它 可 以 在 网 页 加 载 完成 后 对 网 
页 中 的 表格 样式 、 字 体 、 背 景 颜色 等 进行 设置 。 卸 载 事 件 onunload) 是 在 印 载 网 页 时 触发 相应 的 事件 
处 理 程序 ， 卸 载 网 页 是 指 刷新 、 关 闭 当 前 页 或 从 当前 页 跳 转 到 其 他 网 页 中 ， 该 事件 常 被 用 于 在 关闭 当 
前 页 或 跳 转 其 他 网 页 时 ， 弹 出 询问 提示 框 。 

在 制作 网 页 时 ， 为 了 便于 网 页 资源 的 利用 ， 可 以 在 网 页 加 载 事件 中 对 网 页 中 的 元 素 进行 设置 。 下 
面 以 实例 的 形式 讲解 如 何在 页 面 中 合理 利用 图 片 资 源 。 

【 例 9.08】 在 网 页 加 载 时 ， 将 图 片 缩小 成 指定 的 大 小 ， 当 鼠标 移动 到 图 片上 时 ， 将 图 片 大 小 
恢复 成 原始 大 小 ， 并 在 重 载 或 离开 网 页 时 ， 用 提示 框 显示 欢迎 信息 。 代 码 如 下 :〈 实例 位 置 : 资源 包 \ 
源码 \ 09\9.08 ) 


01 <body onunload="pclose()"> < 上 -调用 页 面 的 卸载 事件 -> 

02 <img src="image1.jpg" name="img1" onload="blowup()" onmouseout="blowup()" 
onmouseover="reduce()"> <!-- 在 图 片 标记 中 调用 相关 事件 --> 

03 <scripttype="text/javascript"> 

04 varh=img1.height:; 1/ 获取 图 片 的 原始 高 度 


05 varw=img1.width; 
06 function blowup()\{ 


07 if (img1.height>=hX{ /如果 当前 图 片 高 度 大 于 或 等 于 图 片 原始 高 度 
08 img1.height=h-100; // 缩 小 图 片 的 高 度 

09 img1.width=w-100; /缩小 图 片 的 宽度 

10 } 

让 

12 function reduce()f /恢复 图 片 的 原始 大 小 

13 if (img1.height<hX{ pps ele ed 

14 img1.height=h; /恢复 图 片 为 原始 高 

15 img1.width=w: 人 

16 } 
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} 
18 function pclose(X{ /定义 外 载 网 页 时 的 函数 
19 alert(" 欢 迎 浏览 本 网 页 "); // 弹 出 对 话 框 
20 } 
21 </script> 
22 </lbody> 


运行 实例 , 结果 如 图 9.13 所 示 。 当 重 载 或 离开 网 页 时 将 弹出 显示 欢迎 信息 的 提示 框 , 结果 如 图 9.14 
所 示 。 


codesuoavein PD- | Srasesar | 


ode\SLioE\08\nc 几 "地 | 三 网 Rbcgad 闪 小 晶片 


图 9.13 ”网 页 加 载 后 的 效果 图 9.14 重 载 或 离开 网 页 时 的 效果 
9.4.2 ”页面 大 小 事件 


页 面 大 小 事件 〈onresize) 是 用 户 改变 浏览 器 的 大 小 时 触发 事件 处 理 程序 。 
例如 ， 当 浏览 器 窗口 被 调整 大 小 时 ， 弹 出 一 个 对 话 框 。 代 码 如 下 : 


01 <body onresize="showMsg()"> 

02 <script type="text/javascript"> 

03 function showMsg(){ 

04 alert(" 浏 览 器 窗口 大 小 被 改变 "); // 弹 出 对 话 框 
SU 

06 </script> 


运行 上 述 代码 ， 当 用 户 试图 改变 浏览 器 窗口 的 大 小 时 ， 将 弹出 如 图 9.15 所 示 的 对 话 框 。 


全 测 涡 基 窗 口 大 小 坟 改 友 


9.15 ”弹出 对 话 框 
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9.5.1 判断 用 户 注册 信息 是 否 合法 


模拟 用 户 注册 过 程 ， 当 文本 框 内 容 为 空 或 用 户 输入 不 合法 时 ， 给 出 相应 的 提示 信息 ， 运 行 结果 如 
图 9.16 所 示 。( 实例 位 置 : 资源 包 \ 源 码 \09\ 实 战 \01 ) 


用 户 名 不 能 超过 6 位 ! 
密码 符合 要 求 ! 
两 次 输入 的 密码 不 一 致 ! 


重 写 


图 9.16 验证 表单 并 给 出 相应 的 提示 信息 


9.5.2 ”通过 onreset 事件 对 注册 信息 进行 重 置 


在 用 户 注册 页 面 中 ， 通 过 onreset 事件 对 用 户 输入 的 注册 信息 进行 重 置 ， 在 重 置 之 前 弹出 确认 对 话 
框 进行 确认 ， 运 行 结果 如 图 9.17 所 示 。( 实例 位 置 : 资源 包 \ 源 码 \09\ 实 战 \02 ) 


司 ] EACode\Ty\08\06Vindex. 让 ”CC | 局 重量 之 和 出 滑 U 革 .x 
EEC EEC 


Mi 


用 户 名 : ||mrbook 
EE 


a em 


注册 | | 重 写 


[7) 二 要 重新 迁 和 二 ? 


图 9.17 弹出 确认 对 话 框 进行 确认 
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9.5.3 ”通过 键盘 按键 选择 正确 答案 


选择 题 如 下 : 
被 称 为 “ 国 球 ” 的 球 类 运动 是 ( ，)。 
A. 篮球 B. 排球 C. 乒乓 球 D. 羽毛 球 


使 用 键盘 上 的 “A”“B”“C”“D”4 个 按键 来 选择 正确 的 答案 ， 并 判断 结果 是 否 正确 ， 运 行 结果 
如 图 9.18 所 示 。( 实例 位 置 : 资源 包 \ 源 码 \09\ 实 战 \03 ) 


图 918 判断 结果 是 否 正确 
9.6 小 结 


本 章 主 要 讲解 了 事件 与 事件 处 理 相关 内 容 ， 通 过 本 章 的 学 习 ， 读 者 可 以 熟悉 事件 与 事件 处 理 的 概 
念 ， 并 熟练 掌握 鼠标 、 键 盘 、 页 面 、 表 单 等 事件 的 处 理 技术 ， 从 而 实现 各 种 网 站 效果 。 


文档 对 象 
(名 + 视频 讲解 : 40 分 钟 ) 


文档 (Document) 对 象 是 浏览 器 窗口 【Window) 对 象 的 一 个 主要 部 分 ， 它 
包含 了 网 页 显示 的 各 个 元 素 对 象 ， 是 最 常用 的 对 象 之 一 。 本 章 将 对 Document 对 象 
进行 详细 介绍 。 

通过 学 习 本 章 ， 读 者 主要 党 担 以 下 内 容 : 

MI 什么 是 文档 对 象 

让， 通过 文档 对 象 设置 链接 文字 的 颜色 

”通过 文档 对 象 设置 文档 背景 色 和 前 景色 

WI 通过 文档 对 象 动态 添加 HTML 标记 
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10.1 文档 对 象 概述 


Document 对 象 代表 了 一 个 浏览 器 窗口 或 框架 中 显示 的 HTML 文档 。JavaScript 会 为 每 个 HTML 文 
档 自 动 创建 一 个 Document 对 象 ， 通 过 Document 对 象 可 以 操作 HIML 文档 中 的 内 容 。 

1. 文档 对 象 介绍 

文档 (Document) 对 象 代表 浏览 器 窗口 中 的 文档 ， 该 对 象 是 Window 对 象 的 子 对 象 ， 由 于 Window 
对 象 是 DOM 对 象 模型 中 的 默认 对 象 ,因此 Window 对 象 中 的 方法 和 子 对 象 不 需要 使 用 window 来 引 
通过 Document 对 象 可 以 访问 HIML 文档 中 包含 的 任何 HTML 标记 , 并 可 以 动态 地 改变 HTML 标记 中 


的 内 容 ， 例 如 表单 、 图 像 、 表 格 和 超 链接 等 。 该 对 象 在 JavaScript 1.0 版 本 中 就 已 经 存在 ， 在 随后 的 版 
本 中 又 增加 了 几 个 属性 和 方法 。Document 对 象 层次 结构 如 图 10.1 所 示 。 


document 


I 


anchor applet image form cookie 


select submit | | hidden 


checkbox password | | | button | 


|eption | reset | | text [textarea radio | 


图 10.1 Document 对 象 层次 结构 
2. 文档 对 象 的 常用 属性 


Document 对 象 拥有 很 多 属性 ， 这 些 属性 主要 用 于 描述 HTML 文档 中 的 超 链接 、 颜 色 、URL 以 及 
文档 中 的 表单 元 素 、 图 片 等 。Document 对 象 的 一 些 常 用 属性 及 说 明 如 表 10.1 所 示 。 
表 10.1 Document 对 象 属性 及 说 明 


属 性 说 ”有明 

alinkColor 链接 文字 被 单 击 时 的 颜色 ， 对 应 于 <body> 标 记 中 的 alink 属性 
all[] 存储 HTML 标记 的 一 个 数组 (该 属性 本 身 也 是 一 个 对 象 
bgColor 文档 的 背景 颜色 ， 对 应 于 <body> 标 记 中 的 bgcolor 属性 

feColor 文档 的 文本 颜色 (不 包含 超 链接 的 文字 〉 对 应 于 <body> 标 记 中 的 text 属性 值 
forms[] 存储 窗 体 对 象 的 一 个 数组 (该 属性 本 身 也 是 一 个 对 象 ) 

images[] 存储 图 像 对 象 的 一 个 数组 (该 属性 本 身 也 是 一 个 对 象 ) 
linkColor 未 被 访问 的 链接 文字 的 颜色 ， 对 应 于 <body> 标 记 中 的 link 属性 
links[] 存储 link 对 象 的 一 个 数组 该 属性 本 身 也 是 一 个 对 象 ) 
VlinkColor 表示 已 访问 的 链接 文字 的 颜色 ， 对 应 于 <body> 标 记 的 vlink 属性 
title 当前 文档 标题 对 象 

bod 当前 文档 主体 对 象 

readyState 获取 某 个 对 象 的 当前 状态 

URL 获取 或 设置 URL 
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3. 文档 对 象 的 常用 方法 


Document 对 象 中 包含 了 一 些 用 来 操作 和 处 理 文档 内 容 的 方法 。Document 对 象 的 常用 方法 和 说 明 
如 表 10.2 所 示 。 


表 10.2 Document 对 象 的 方法 及 说 明 


方 。 法 说 明 
close | 关闭 文档 的 输出 流 
open | 打开 一 个 文档 输出 流 并 接收 write 和 writeln 方法 创建 页 面 内 容 
write | 向 文档 中 写 入 HTML 或 JavaScript 语句 
writeln | 向 文档 中 写 入 HTML 或 JavaScript 语句 ， 并 以 换行 符 结束 
createElement | 创建 一 个 HTML 标记 
getElementById 获取 指定 id 的 HTML 标记 


10.2 ”文档 对 象 的 应 用 


本 节 主 要 通过 使 用 Document 对 象 的 属性 和 方法 完成 一 些 常用 的 实例 , 例如 链接 文字 颜色 设置 、 获 
取 并 设置 URL 等 。 下 面 对 Document 对 象 常用 的 应 用 进行 详细 介绍 。 


10.2.1 ”链接 文字 颜色 设置 


链接 文字 颜色 设置 通过 使 用 alinkColor 属性 、linkColor 属性 和 vlinkColor 属性 来 实现 。 
1. alinkColor 属性 

alinkColor 属性 用 来 获取 或 设置 当 链 接 被 单 击 时 显示 的 颜色 。 

语法 如 下 : 

[color=]Jdocument.alinkcolor[=setColor] 


参数 说 明 。 
加 setColor: 可 选项 。 用 来 设置 颜色 的 名 称 或 颜色 的 RGB 值 。 
回 color: 可 选项 。 是 一 个 字符 串 变量 ， 用 来 获取 颜色 值 。 


2. linkColor 属性 

linkColor 属性 用 来 获取 或 设置 页 面 中 未 单 击 的 链接 的 颜色 。 
语法 如 下 : 

[color=]Jdocument.linkColor[=setColor] 

参数 说 明 。 

加 setColor: 可 选项 。 用 来 设置 颜色 的 名 称 或 颜色 的 RGB 值 。 
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回 “color: 可 选项 。 是 一 个 字符 串 变量 ， 用 来 获取 颜色 值 。 
3. vlinkColor 属性 


vlinkColor 属性 用 来 获取 或 设置 页 面 中 单 击 过 的 链接 的 颜色 。 
语法 如 下 : 


[color=]Jdocument.vlinkColor[=setColor] 


参数 说 明 。 

回 setColor: 可 选项 。 用 来 设置 颜色 的 名 称 或 颜色 的 RGB 值 。 

回 “color: 可 选项 。 是 一 个 字符 串 变 量 ， 用 来 获取 颜色 值 。 

【 例 10.01】 本 实例 将 分 别 设置 超 链接 3 个 状态 的 文字 颜色 。 将 超 链接 的 默认 文字 颜色 设置 为 蓝 
色 , 超 链接 被 单 击 时 的 文字 颜色 设置 为 黑色 , 单 击 过 的 超 链接 的 文字 颜色 设置 为 淡 蓝 色 。 代码 如 下 :( 实 
例 位 置 : 资源 包 \ 源 码 \10\10.01 ) 


01 <span style="font-size:36px"><a id="a1" href="#">JavaScript 技术 论坛 </a></span> 
02 <scripttype="text/javascript"> 


03 document.linkColor="blue"; /设置 未 单 击 的 链接 的 颜色 

04 document.alinkColor="#000000"; // 设 置 当 链接 被 单 击 时 显示 的 颜色 
05 document.vlinkColor ="#00CCFF"; // 设 置 单 击 过 的 链接 的 颜色 

06 </script> 


运行 实例 ， 当 未 单 击 超 链接 时 超 链接 文字 的 颜色 如 图 10.2 所 示 ， 当 单 击 超 链接 时 超 链接 文字 的 颜 
色 如 图 10.3 所 示 ， 当 单 击 过 超 链接 时 超 链 接 的 文字 颜色 如 图 10.4 所 示 。 


EEC ET OOols ley//eycode/s U0 PD ~ © Bm 
文件 四 妃 强 E) 理财 履 束 A) 工具 DD !” | 文件 (月 区 器 (E) 重 看 V) 履历 闪 (A 工具 1” 文件 日 交错 EE) 查看) 站 呈 (A 工具 站 1 


JavaScript 技 术 论 坛 | | JavaScript 枝 术 论 坛 JavaScript 技 术 论 坛 


图 10.2 未 单 击 链 接 时 为 蓝 色 10.3 单 击 链接 时 为 黑色 图 10.4 单 击 过 的 链接 为 淡 蓝 色 


10.2.2 文档 背景 色 和 前 景色 设置 


文档 背景 色 和 前 景色 的 设置 可 以 使 用 bgColor 属性 和 feColor 属性 来 实现 。 


1. bgColor 属性 

bgColor 属性 用 来 获取 或 设置 页 面 的 背景 颜色 。 
语法 如 下 : 

[color=]Jdocument.bgColor[=setColor] 

参数 说 明 。 


setColor: 可 选项 。 用 来 设置 颜色 的 名 称 或 颜色 的 RGB 值 。 
color: 可 选项 。 是 一 个 字符 串 变 量 ， 用 来 获取 颜色 值 。 
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2. fgColor 属性 


fgColor 属性 用 来 获取 或 设置 页 面 的 前 景 颜色 ， 即 页 面 中 文字 的 颜色 。 
语法 如 下 : 


[color=]document.fgColor[=setColor] 


参数 说 明 。 

setColor: 可 选项 。 用 来 设置 颜色 的 名 称 或 颜色 的 RGB 值 。 

color: 可 选项 。 是 一 个 字符 串 变 量 ， 用 来 获取 颜色 值 。 

【 例 10.02】 本 实例 将 实现 动态 改变 文档 的 前 景色 和 背景 色 的 功能 ,每 间隔 一 秒 , 文档 的 前 景色 

和 背景 色 就 会 发 生 改 变 。 代 码 如 下 : ( 实例 位 置 : 资源 包 \ 源 码 \10\10.02 ) 

01 /背景 自动 变色 

02 <scripttype="text/javascript"> 

03 /定义 颜色 数组 

04 varArraycolor=new Array("#00FF66","#FFFF99","#99CCFF","#FFCCFF","#FFCC99","#00FFFF"); 


05 varn=0; /初始 化 变量 

06 function changecolors(}{ 

07 N++; // 对 变量 进行 加 1 操作 

08 if(n==(Arraycolorlength-1)) n=0; // 判 断 数 组 下 标 是 否 指向 最 后 一 个 元 素 
09 document.bgColor = Arraycolor[n]; // 设 置 文 档 背 景 颜色 

10 document.fgColor=Arraycolor[n-1]; // 设 置 文 档 字体 颜色 

11 setTimeout("changecolors()",1000); /每 隔 1 秒 执行 一 次 函数 

12° 3 

13 changecolors(); // 调 用 函数 

14 </script> 


运行 实例 ， 文 档 的 前 景色 和 背景 色 如 图 10.5 所 示 ， 在 间隔 1 秒 后 文档 的 前 景色 和 背景 色 将 会 自动 
改变 ， 如 图 10.6 所 示 。 


EE seNcode\stoovo2vne 记 - 0 
文件 朋 。 六 者 E) 下 看 M)。 改革 闪 (A。 工具 TT) 总 (H) 


DE codesioo oine P -< | S Hamero| 
文件 月 妨 缠 E) 下 看 V) 收 而 A) 工具 TT 才 b(H) 


10.5 自动 变色 前 10.6 自动 变色 后 


10.2.3 ”获取 并 设置 URL 


获取 并 设置 URL 可 以 使 用 Document 对 象 的 URL 属性 来 实现 , 该 属性 可 以 获取 或 设置 当前 文档 
的 URL。 
语法 如 下 : 


[url=Jdocument.URL[=setUr] 
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参数 说 明 。 

url: 可 选项 。 字 符 串 表 达 式 ， 用 来 存储 当前 文档 的 URL。 

回 setUrl: 可 选项 。 字 符 串 变量 ， 用 来 设置 当前 文档 的 URL。 

【 例 10.03】 本 实例 实现 在 页 面 中 显示 当前 页 面 的 URL， 代 码 如 下 : ( 实例 位 置 : 资源 包 \ 源 码 \ 

10\10.03 ) 

01 <scripttype="text/javascript"> 

02 ”document.write("<b> 当 前 页 面 的 URL: </b>"+document.URL); // 获 取 当 前 页 面 的 URL 地 址 

03 </script> 


运行 结果 如 图 10.7 所 示 。 


Os EACode\st\o9\03Vnc PD - ©| 


】 油 强 (E) 音 夏 (V) 效 写 天 (A) 


10.7 显示 当前 页 面 的 URL 
10.2.4 在 文档 中 输出 数据 


在 文档 中 输出 数据 可 以 使 用 write0 方 法 和 writeln() 方 法 来 实现 。 

1.， write() 方 法 

write( 方 法 用 来 向 HTML 文档 中 输出 数据 ， 其 数据 包括 字符 串 、 数 字 和 HTML 标记 等 。 

语法 如 下 : 

document.write(text); 

参数 text 表示 在 HTML 文档 中 输出 的 内 容 。 

2. writeln() 方 法 

writeln(0 方 法 与 write0 方 法 作用 相同 ， 唯 一 的 区 别 在 于 writeln0 方 法 在 输出 的 内 容 后 ， 添 加 了 一 个 
换行 符 。 但 换行 符 只 有 在 HTML 文档 中 <pre></pre> 标 记 〈 此 标记 可 以 把 文档 中 的 空格 、 回 车 、 换 行 等 
表现 出 来 ) 内 才能 被 识别 。 

语法 如 下 : 

document.writeln(text); 

参数 text 表示 在 HTML 文档 中 输出 的 内 容 。 

例如 , 使 用 write0 方 法 和 writeln0 方 法 在 页 面 中 输出 几 段 文字 , 注意 这 两 种 方法 的 区 别 , 代码 如 下 : 

01 <scripttype="text/javascript"> 


02 document write(" 使 用 write 方法 输出 的 第 一 段 内 容 !"); 
03 document.write(" 使 用 write 方法 输出 的 第 二 段 内 容 <hr>"); 
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04 document.writeln(" 使 用 writeln 方法 输出 的 第 一 段 内 容 ! "); 

05 document.writeln(" 使 用 writeln 方法 输出 的 第 二 段 内 容 <hr>"); 

06 </script> 

07 <pre> 

08 <scripttype="text/javascript"> 

09 document.writeln(" 在 pre 标记 内 使 用 writeln 方法 输出 的 第 一 段 内 容 ! "); 
10 document.writeln(" 在 pre 标记 内 使 用 writeln 方法 输出 的 第 二 段 内 容 "); 
11 </script> 

12 </pre> 


运行 效果 如 图 10.8 所 示 。 


Go me de 月 - 6 三 wie0FERwisht x 


Te 段 内 容 ! 和 


使 用 miteln 方 法 输出 的 第 一 段 内 容 ! 使 用 ritelo 广 法 答 出 的 第 二 自 内 容 


在 pre 标 记 内 使 用 ritels 方 去 输 的 第 一 段 内 容 ! 
| 段 内 容 


10.8 在 文档 中 输出 数据 


10.2.5 动态 添加 一 个 HTML 标记 


动态 添加 一 个 HTML 标记 可 以 使 用 createElement() 方 法 来 实现 。createElement( 方 法 可 以 根据 一 


指定 的 类 型 来 创建 一 个 HTML 标记 。 


语法 如 下 : 
sElement=document.createElement(sName) 

参数 说 明 。 

回 sElement: 用 来 接收 该 方法 返回 的 一 个 对 象 。 


回 sName: 用 来 设置 HTML 标记 的 类 型 和 基本 属性 。 
【 例 10.04】 本 实例 将 在 页 面 中 定义 一 个 “动态 添加 文本 框 ” 按 钮 ， 每 单 击 一 次 该 按钮 ， 在 页 面 


中 动态 添加 一 个 文本 框 。 代 码 如 下 :( 实例 位 置 : 资源 包 \ 源 码 \10\10.04 ) 
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01 <scripttype="text/javascript"> 
02 function addlnput(){ 


03 var txt=document.createElement("input"); /| 动态 添加 一 个 input 文本 框 

04 txt.type="text"; // 为 添加 的 文本 框 type 属性 赋值 

05 txt.name="txt"; // 为 添加 的 文本 框 name 属性 赋值 
06 txt.value=" 动 态 添加 的 文本 框 "; // 为 添加 的 文本 框 value 属性 赋值 
07 document.form1.appendChild(txt); // 把 文本 框 作为 子 节点 追加 到 表单 中 
08 } 

09 </script> 

10 </head> 


11 <body background="bg.gif’> 
12 <form name="form1"> 
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13 ”<input type="button" name="btn1" value=" 动 态 添加 文本 框 " onclick="addlnput()" /> 
14 </form> 


运行 实例 ， 结 果 如 图 10.9 所 示 ， 当 单 击 “ 动 态 添 加 文本 框 ” 按 钮 时 ， 在 页 面 中 会 自动 添加 一 个 文 
本 框 ， 结 果 如 图 10.10 所 示 。 


CJ | ecedesionoNne p+ 0 EE 国 ENcedsstososinep ~ 
ba | 
| 文件 有 妨 缠 (E) 各 看 WV) 收 写实 从) 工具 中 天色 ” 
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图 i 和 
10.2.6 ”获取 文本 框 并 修改 其 内 容 


获取 文本 框 并 修改 其 内 容 可 以 使 用 getElementById0 方 法 来 实现 ,getElementById0 方 法 可 以 通过 指 
定 的 id 来 获取 HTML 标记 ， 并 将 其 返回 。 

语法 如 下 : 

sElement=document.getElementByld(id) 


参数 说 明 。 

回 sElement: 用 来 接收 该 方法 返回 的 一 个 对 象 。 

id: 用 来 设置 需要 获取 HIML 标记 的 id 值 。 

例如 ， 在 页 面 加 载 后 的 文本 框 中 显示 “初始 文本 内 容 "， 当 单 击 按钮 后 将 会 改变 文本 框 中 的 内 容 。 
代码 如 下 : 


01 <scripttype="text/javascript"> 
02 function chg(X{ 


re 
[总 素 加 文 太 权 | [ 动 赤 添加 的 文本 框  ] 
.Wy -二 和 了 


图 10.10 动态 添加 文本 框 后 的 结果 


03 var t=document.getElementByld("txt"); /获取 id 属性 值 为 txt 的 元 素 
04 t.value=" 修 改 后 的 文本 内 容 "; /设置 元 素 的 value 属性 值 
05 } 

06 </script> 


07 ”<input type="text" id="txt" value=" 初 始 文本 内 容 "/> 
08 ”<input type="button" value=" 更 改 文本 内 容 " name="btn" onclick="chg()" /> 


程序 的 初始 运行 结果 如 图 10.11 所 示 ， 当 单 击 “ 更 改 文本 内 容 ” 按 钮 后 将 会 改变 文本 框 中 的 内 容 ， 
结果 如 图 10.12 所 示 。 


10.11 文本 框 中 显示 “初始 文本 内 容 ” 10.12 文本 框 中 显示 “修改 后 的 文本 内 容 ” 
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10.3 实 战 


10.3.1 改变 页 面 的 背景 颜色 


根据 下 拉 菜 单 中 选择 的 颜色 值 改 变 页 面 的 背景 颜色 ， 运 行 结 果 如 图 10.13 所 示 。( 实例 位 置 : 资源 
包 \ 源 码 \10\ 实 战 \01 ) 


10.13 ”选择 页 面 的 背景 颜色 


10.3.2 动态 添加 用 户头 像 


在 页 面 中 定义 一 个 “添加 用 户头 像 ”按钮 ， 当 单 击 该 按钮 时 动态 地 向 页 面 中 添加 用 户头 像 ， 运 行 
结果 如 图 10.14 所 示 。( 实例 位 置 : 资源 包 \ 源 码 \10\ 实 战 \02 ) 


[OD eceseryoroen p - © @ wsmrm 
文件 四 ” 沪 强 (E) 至 看 VW) 效 训 夫人 A) 工具 中 帮助 (H) 


稳 1919|1 人 a 失色 


图 10.14 ”向 页 面 中 添加 用 户头 像 
10.4 小 结 
本 章 主要 讲解 了 文档 对 象 (Document 对 象 ) 的 使 用 方法 ， 以 及 该 对 象 的 属性 、 方 法 的 简单 介绍 。 


通过 本 章 的 学 习 ， 可 以 掌握 文档 对 象 实现 的 一 些 常用 的 功能 ， 这 些 功能 在 实际 开发 中 比较 常用 ， 有 必 
要 熟练 掌握 及 应 用 。 


请 
串 
El 
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第 12 章 图 像 对 旬 

第 13 章 文档 对 象 模型 ( DOM ) 
第 14 章 Window 窗口 对 象 

第 15 章 ， Ajax 技术 

第 16 章 jQuery 基础 

第 17 章 jQuery 控制 页 面 

第 18 章 jQuery 事件 处 理 

第 19 章 jQuery 动画 效果 
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本 篇 介绍 了 表单 对 象 ,图像 对 象 , 文档 对 象 模型 (DOM), Window 窗口 对 和 象 ， 
Ajax 技术 ，jQuery 基础 ，jQuery 控制 页 面 ， jQuery 事件 处 理 ，jQuery 动画 效果 
等 内 容 。 学 习 完 本 篇 ， 能 够 开发 一 些 中 小 型 应 用 程序 。 
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表单 对 象 
(名 视频 讲解 ， 46 分 钟 ) 


Document 对 象 的 forms 属性 可 以 返回 一 个 数组 ， 数 组 中 的 每 个 元 素 都 是 一 个 
Form 对 象 。Form 对 象 又 称 为 表单 对 象 ， 通 过 该 对 象 可 以 实现 输入 文字 、 选 择 选 项 
和 提交 数据 等 功能 。 本 章 将 介绍 表单 以 及 表单 元 素 的 应 用 。 

通过 学 习 本 章 ， 读 者 主要 训 担 以 下 内 容 


各 吾 吾 吾 至 


如 何 访问 表单 与 表单 元 素 
表单 对 象 的 属性 、 方 法 与 事件 
文本 框 的 应 用 

按钮 的 应 用 

单 选 按钮 和 复 选 框 的 应 用 

下 拉 荣 单 的 应 用 
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11.1 访问 表单 与 表单 元 素 


Form 对 象 代表 了 HTML 文档 中 的 表单 ， 由 于 表单 是 由 表单 元 素 组 成 的 ， 因 此 Form 对 象 也 包含 着 
多 个 子 对 象 。 


11.1.1 JavaScript 访问 表单 


在 HTML 文档 中 可 能 会 包含 多 个 <form> 标 签 ,JavaScript 会 为 每 个 <form> 标 签 创建 一 个 Form 对 象 ， 
并 将 这 些 Form 对 象 存放 在 forms[] 数 组 中 。 在 操作 表单 元 素 之 前 ,首先 应 当 确定 要 访问 的 表单 , JavaScript 
中 主要 有 以 下 3 种 访问 表单 的 方式 。 

回 ”通过 document.forms[] 按 编号 进行 访问 ， 例 如 document forms[0]。 

回 ”通过 document.formname 按 名 称 进行 访问 ， 例 如 document.forml。 

回 在 支持 DOM 的 浏览 器 中 ， 使 用 document.getElementById("formID") 来 定位 要 访问 的 表单 。 

例如 ， 定 义 一 个 用 户 登 录 表单 ， 代 码 如 下 : 


01 <form id="form1" name="myform" method="post" action="> 


02 用 户 名 : <input type="text" name="username" size="15"><br> 

03 密码 : <input type="password" name="password" maxlength="8" size="15"><br> 
04 <input type="submit" name="sub1" value=" 登 录 "> 

05 </form> 


对 于 该 登录 表单 ， 可 以 使 用 如 下 3 种 方式 访问 。 
加 document.forms[0] 

回 document.myform 

回 document.getElementById("form1") 


11.1.2 ”JavaScript 访问 表单 元 素 


每 个 表单 都 是 一 个 表单 元 素 的 聚集 ， 访 问 表单 元 素 同样 也 是 有 以 下 3 种 方式 。 

加 ”通过 elements[] 按 表单 元 素 的 编号 进行 访问 ， 例 如 document.forml.elements[0]。 

回 ”通过 name 属性 按 名 称 进行 访问 ， 例 如 document forml .textl 。 

回 ”在 支持 DOM 的 浏览 器 中 , 使 用 document.getElementById("elementID") 来 定位 要 访问 的 表单 元 素 。 
例如 ， 定 义 一 个 用 户 登 录 表单 ， 代 码 如 下 : 


01 <formname="form1" method="post" action="> 


02 用 户 名 : <input id="user" type="text" name="usermname" size="15"><br> 

03 密码 : <input type="password" name="password" maxlength="8" size="15"><br> 
04 <input type="submit" name="sub1" value=" 登 录 "> 

05 </form> 


对 于 该 登录 表单 ， 可 以 使 用 document.forml.elements[0] 访 问 第 一 个 表单 元 素 ; 还 可 以 使 用 名 称 访 
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问 表单 元 素 ， 如 document.form1l.password; 还 可 以 使 用 表单 元 素 的 id 来 定位 表单 元 素 ， 如 document. 
getElementById("user ")。 


11.2 表单 对 象 的 属性 、 方 法 与 事件 


和 其 他 对 象 一 样 ， 表 单 对 象 也 有 着 属于 自己 的 一 些 属性 、 方 法 和 事件 。 本 节 将 详细 介绍 表单 对 象 
的 常用 属性 、 方 法 和 事件 。 


1. 表单 对 象 的 属性 
表单 对 象 的 属性 与 form 元 素 的 属性 相关 。 表 单 对 象 的 常用 属性 如 表 11.1 所 示 。 
表 11.1 表单 对 象 的 常用 属性 


属 性 说 明 

name 返回 或 设置 表单 的 名 称 

action 返回 或 设置 表单 提交 的 URL 

method 返回 或 设置 表单 提交 的 方式 ， 可 取 值 为 get 或 post 

encoding 返回 或 设置 表单 信息 提交 的 编码 方式 

id 返回 或 设置 表单 的 id 

length 返回 表单 对 象 中 元 素 的 个 数 

target 返回 或 设置 提交 表单 时 目标 窗口 的 打开 方式 

elements 返回 表单 对 象 中 的 元 素 构成 的 数组 ， 数 组 中 的 元 素 也 是 对 象 


2. 表单 对 象 的 方法 


表单 对 象 只 有 reset0 和 submitO 两 个 方法 ， 这 两 个 方法 相当 于 单 击 了 重 置 按钮 和 提交 按钮 。 表 单 对 
象 的 方法 如 表 11.2 所 示 。 


表 11.2 表单 对 象 的 方法 


方法 说 明 
reset 将 所 有 表单 元 素 重 置 为 初始 值 ， 相 当 于 单 击 了 重 置 按钮 
submitO 提交 表单 数据 ， 相 当 于 单 击 了 提交 按钮 

3. 表单 对 象 的 事件 


表单 对 象 的 事件 主要 有 两 个 ， 这 两 个 事件 和 表单 对 象 的 两 个 方法 类 似 。 表 单 对象 的 事件 如 表 11.3 
所 示 。 


表 11.3 表单 对 象 的 事件 


事件 说 明 
reset 重 置 表单 时 触发 的 事件 
submit 提交 表单 时 触发 的 事件 
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11.3 表单 元 素 


表单 是 实现 动态 网 页 的 一 种 主要 的 外 在 形式 ， 使 用 表单 可 以 收集 客户 端 提交 的 有 关 信息 ， 是 实现 
网 站 互动 功能 的 重要 组 成 部 分 。 本 节 将 介绍 几 个 表单 对 象 的 常见 应 用 。 


11.3.1 文本 框 

在 HTML 中 ， 文 本 框 包括 单行 文本 框 和 多 行文 本 框 两 种 ， 多 行文 本 框 又 叫 作 文本 域 。 密 码 框 可 以 
看 成 是 一 种 特殊 的 单行 文本 框 ， 在 密码 框 中 输入 的 文字 以 掩 码 的 形式 显示 。 

1. 文本 框 的 属性 


无 论 哪 一 种 文本 框 ， 它 们 的 属性 大 多 都 是 相同 的 。 常 用 的 文本 框 属性 如 表 11.4 所 示 。 
表 11.4 文本 框 对 象 常 用 的 属性 及 说 明 


属 性 说 明 
id 返回 或 设置 文本 框 的 id 属性 值 
Dame 返回 文本 框 的 名 称 
ype 返回 文本 框 的 类 型 
value 返回 或 设置 文本 框 中 的 文本 ， 即 文本 框 的 值 
IOWS 返回 或 设置 多 行文 本 框 的 高 度 
cols 返回 或 设置 多 行文 本 框 的 宽度 
disabled, 返回 或 设置 文本 框 是 否 被 禁用 , 该 属性 值 为 true 时 禁用 文本 框 , 该 属性 值 为 false 时 启用 文本 框 
2. 文本 框 的 方法 


无 论 哪 一 种 文本 框 ， 它 们 的 方法 都 是 相同 的 。 这 些 方法 大 多 都 与 文本 框 中 的 文本 相关 。 常 用 的 文 
本 框 的 方法 如 表 11.5 所 示 。 
表 11.5 文本 框 对 象 常用 的 方法 及 说 明 


方 ” 法 说 明 

blurO | 该 方法 用 于 将 焦点 从 文本 框 中 移 开 
focus0 | 该 方法 用 于 将 焦点 赋 给 文本 框 
click0 | 该 方法 可 以 模拟 文本 框 被 鼠标 单 击 
selectO 该 方法 可 以 选中 文本 框 中 的 文字 


3. 文本 框 的 应 用 一 一 验证 表单 内 容 是 否 为 空 

验证 表单 中 输入 的 内 容 是 否 为 空 是 表单 对 象 最 常见 的 应 用 之 一 。 在 提交 表单 前 进行 表单 验证 ， 可 
以 节约 服务 器 的 处 理 器 周期 ， 为 用 户 节省 等 待 的 时 间 。 

【 例 11.01】 下 面 制作 一 个 简单 的 用 户 登 录 界 面 ， 并 且 验 证 用 户 名 和 密码 不 能 为 室 ， 如 果 为 空 则 
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给 出 提示 信息 。 具 体 步 又 如 下 : ( 实例 位 置 : 资源 包 \ 源 码 \11\11.01 ) 
(1) 设计 登录 页 面 ， 效 果 如 图 11.1 所 示 ， 具 体 代码 请 参考 本 书 附带 光盘 。 
(2) 通过 JavaScript 脚本 判断 用 户 名 和 密码 是 否 为 空 ， 具 体 代码 如 下 : 


01 <scripttype="text/javascript"> 
02 function checkinput(){ 


03 if(form1.name.value=="™")}{ 
04 alert(" 请 输入 用 户 名 "); 
05 form1.name.focus(); 
06 return false; 

07 } 

08 if(form1.pwd.value=="", 
09 alert(" 请 输入 密码 !"); 
10 form1.pwd.focus(); 

用 | return false ; 

12 } 

ji， return true; 

14 } 

15 </script> 


// 自 定义 函数 

// 淹 断 用 户 名 是 否 为 空 

// 弹 出 对 话 框 

// 为 文本 框 设置 焦点 

// 返 回 false 不 允许 提交 表单 


// 判 断 密码 是 否 为 空 

// 弹 出 对 话 框 

// 为 密码 框 设置 焦点 

// 返 回 false 不 允许 提交 表单 


// 返 回 true 允许 提交 表单 


(3) 通过 “登录 ”按钮 的 onclick 事件 调用 自 定义 函数 checkinput0， 代 码 如 下 : 


<input type="image" name="imageField" onclick="retu 
运行 结果 如 图 11.1 所 示 。 


Im checkinput()" src="images/dl_06.gif" /> 


®@e EE | 


文 半 (站 痪 虹 (和 下 看 V) 交大 天 A) 工具 


nerisoFr 


EPFE TT x 
站 机 区 


明日 购物 网 后 名 管理 系统 


图 11.1 提示 请 输入 用 户 名 


11.3.2 ”按钮 


在 HIML 中 ， 按 钮 分 为 普通 按钮 、 提 交 按 钮 和 重 置 按钮 3 种 。 从 功能 上 来 说 ， 普 通 按 钮 通常 用 来 


调用 函数 ， 提 交 按 钮 用 来 提交 表单 ， 重 置 按 钮 用 来 


它们 的 属性 和 方法 是 完全 相同 的 。 
1. 按钮 的 属性 


EE 置 表单 。 虽 然 这 3 种 按钮 的 功能 有 所 不 同 ， 但 是 


无 论 哪 一 种 按钮 ， 它 们 的 属性 都 是 相同 的 。 常 用 的 按钮 属性 如 表 11.6 所 示 。 
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表 11.6 按钮 常用 的 属性 及 说 明 


属 性 说 明 
记 返回 或 设置 按钮 的 id 属性 值 

name 返回 按钮 的 名 称 

type 返回 接 钮 的 类 型 

value | 。 返回 或 设置 显示 在 按钮 上 的 文本 ， 即 按钮 的 什 


disabled 返回 或 设置 按钮 是 否 被 禁用 ， 该 属性 值 为 rue 时 禁用 按钮 ， 该 属性 值 为 false 时 启用 按钮 


2. 按钮 的 方法 
无 论 哪 一 种 按钮 ， 它 们 的 方法 都 是 相同 的 。 常 用 的 按钮 的 方法 如 表 11.7 所 示 。 


表 11.7 按钮 对 象 常用 的 方法 及 说 明 


方 ” 法 说 明 


该 方法 用 于 将 焦点 从 按钮 中 移 开 


focusO 该 方法 用 于 将 焦点 赋 给 按钮 
该 方法 可 以 模拟 按钮 被 鼠标 单 击 


3. 按钮 的 应 用 一 一 获取 表单 元 素 的 值 


用 户 在 浏览 网 页 时 ， 经 常 需要 填写 一 些 动态 表单 。 当 用 户 单 击 相应 的 按钮 时 就 会 提交 表单 ， 这 时 ， 
程序 需要 获取 表单 内 容 ， 并 对 表单 内 容 进行 验证 或 者 存储 。 


【 例 11.02】 


用 户 在 互联 网 上 发 表 自 己 的 文章 时 ， 需 要 填写 作者 名 称 、 文 章 标 题 以 及 文章 内 容 。 


本 实例 将 介绍 如 何 获取 表单 中 的 文本 框 、 文 本 域 以 及 隐藏 域 的 值 。 具 体 步骤 如 下 : 〈 实例 位 置 : 资源 包 \ 
源码 \11\11.02 ) 
(1) 在 页 面 中 定义 添加 文章 的 表单 ， 在 表单 中 添加 文本 框 、 文 本 域 和 按钮 等 表单 元 素 ， 具 体 代码 


如 下 : 


<table width="500" border="0" align="center" cellpadding="0" cellspacing="0"> 
<tr> 


<td align="|left" valign="top"> 
<table width="95%" border="0" align="center" cellpadding="0" cellspacing="0"> 
<tr> 
<td height="22" align="left"> 
<img src="images/dian.gif" width="7" height="7"> 文章 添加 
</td> 
</tr> 
<tr> 
<td height="1"> 
<img src="images/xian.gif" width="366" height="1"> 
</td> 
</tr> 
</table> 
<br> 
<table width="500" border="0" align="center" cellpadding="0" cellspacing="0"> 
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18 <form name="form1" method="post" onSubmit="return Mycheck()"> 

19 <tr> 

20 <td height="28" align="right"> 作 者 名 称 : </td> 

P| <td height="28"><input name="author" type="text" id="author"></td> 
22 </tr> 

23 <tr> 

24 <td height="28" align="right"> 文 章 主题 : </td> 

25 <td height="28"><input name="title" type="text" id="title"></td> 

26 </tr> 

27 <tr> 

28 <td height="22" align="right"> 文 章 内 容 : </td> 

29 <td height="22"> 

30 <textarea name="content" cols="45" rows="6" id="content"></textarea> 
31 </td> 

32 </tr> 

33 <tr> 

34 <td height="28" colspan="2" align="center"> 

35 <input name="hid" type="hidden" id="hid" value=" 文 章 添加 成 功 "> 
36 <input name="add" type="submit" id="add" value=" 添 加 ">&nbsp; 
37 <input type="reset" name="Submit2" value=" 重 置 "> 

38 </td> 

39 </tr> 

40 </form> 

41 </table></td> 

42 </tr> 

43 </table> 


(2) 定义 Mycheck0 函 数 ， 在 函数 中 分 别 获取 用 户 输入 的 作者 名 称 、 文 章 主题 和 文章 内 容 ， 并 对 
获取 到 的 信息 进行 连接 ， 具 体 代 码 如 下 : 


01 <scripttype="text/javascript"> 
02 function Mycheck(X{ 
03 var checkstr=" 获 取 内 容 如 下 : \n"; 


04 if (document.form1.author.value != ™")}{ 

05 checkstr+=" 作 者 名 称 : "+document.form1.author.value+"\n"; 
06 }else{ 

07 return false; 

08 } 

09 if (document.form+1 .title.value != ™"){ 

10 checkstr+=" 文 章 主题 : "+document.form1.title.value+"\n"; 

11 jelsef 

12 return false; 

13 

14 if (document.form1 .content.value != ™X{ 

15 checkstr+=" 文 章 内容 : "+document.form1.content.value+"\n"; 
16 }else{ 

亿 : return false; 

18 } 

19 if (document.form1.hid.value != X{ 

20 checkstr+=document.form1.hid.value; 


// 定 义 字符 串 变量 

// 如 果 作 者 名 称 不 为 空 

// 连 接 用 户 输入 的 作者 名 称 
// 返 回 false 不 允许 提交 表单 


/如 果 文章 主题 不 为 空 
// 连 接 用 户 输入 的 文章 主题 


1/ 返回 false 不 允许 提交 表单 


/如果 文 章 内 容 不 为 空 
// 连 接 用 户 输入 的 文章 内 容 


// 返 回 false 不 允许 提交 表单 


// 如 果 隐藏 域 的 值 不 为 空 
// 连 接 隐藏 域 的 值 
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alert(checkstr); // 输 出 变量 checkstr 的 值 
return true; /提交 表单 


25 </script> 


行 结果 如 图 11.2 所 示 。 


站 Ecode\st oz nc D+ OB ses. x| | 
文件 (F] ”所 强 E) ”可 看 V) 。 收 重头 人 内) 工 


， 用 心 体会 


EDI 


11.2 ”获取 文本 框 、 文 本 域 以 及 隐藏 域 的 值 


11.3.3” 单 选 按 钮 和 复 选 框 


在 网 页 中 ， 单 选 按 钮 用 来 进行 单一 选择 ， 在 页 面 中 以 圆 框 表示 。 而 复 选 框 能 够 进行 项 目的 多 项 选 
择 ， 以 一 个 方 框 表示 。 一 般 情况 下 ， 单 选 按钮 和 复 选 框 都 会 以 组 的 方式 出 现 ， 创 建 单 选 按钮 组 或 复 选 
框 组 ， 只 需要 将 所 有 单 选 按钮 或 所 有 复 选 框 的 name 属性 值 设置 为 相同 的 值 即 可 。 

单 选 按钮 和 复 选 框 虽然 在 功能 上 有 所 不 同 ， 但 是 它们 的 属性 和 方法 几乎 是 完全 相同 的 。 

1. 单 选 按钮 和 复 选 框 的 属性 

无 论 是 单 选 按钮 还 是 复 选 框 ， 它 们 的 属性 都 是 相同 的 。 常 用 的 单 选 按钮 和 复 选 框 的 属性 如 表 11.8 


所 示 。 
表 11.8 单 选 按钮 对 象 和 复 选 框 对 象 常用 的 属性 及 说 明 
属 性 说 明 
id 返回 或 设置 单 选 按钮 或 复 选 框 的 id 属性 值 
name 返回 单 选 按钮 或 复 选 框 的 名 称 
type 返回 单 选 按钮 或 复 选 框 的 类 型 
Value 返回 或 设置 单 选 按钮 或 复 选 框 的 值 
length 返回 一 组 单 选 按钮 或 复 选 框 中 包含 元 素 的 个 数 
po 返回 或 设置 一 个 单 选 按钮 或 复 选 框 是 否 处 于 被 选中 状态 ， 该 属性 值 为 tue 时 ， 单 选 按钮 或 复 选 框 处 于 
被 选中 状态 ， 该 属性 值 为 false 时 ， 单 选 按 钮 或 复 选 框 处 于 未 被 选中 状态 
起 坟 | 兵 返回 或 设置 单 选 按钮 或 复 选 框 是 否 被 禁用 , 该 属性 值 为 tue 时 禁用 单 选 按钮 或 复 选 框 , 该 属性 值 为 false 


时 启用 单 选 按钮 或 复 选 框 
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-注意 
如 果 在 一 个 单 选 按钮 组 中 有 多 个 选项 设置 了 checked 属性 ， 那 么 只 有 最 后 一 个 设置 了 checked 
属性 的 选项 被 选中 。 


2. 单 选 按钮 和 复 选 框 的 方法 


无 论 是 单 选 按钮 还 是 复 选 框 ， 它 们 的 方法 都 是 相同 的 。 常 用 的 单 选 按钮 和 复 选 框 的 方法 如 表 11.9 
所 示 。 


表 11.9 单 选 按钮 和 复 选 框 常用 的 方法 及 说 明 


方法 说 明 

blur0 该 方法 用 于 将 焦点 从 单 选 按钮 或 复 选 框 中 移 开 
focusO 该 方法 用 于 将 焦点 赋 给 单 选 按 钮 或 复 选 框 
clickO, 该 方法 可 以 模拟 单 选 按钮 或 复 选 框 被 鼠标 单 击 


3. 单 选 按钮 和 复 选 框 的 应 用 一 一 获取 单 选 按钮 和 复 选 框 的 值 


通过 在 表单 中 使 用 单 选 按钮 和 复 选 框 ， 可 以 获得 用 户 选择 的 选项 。 通 常情 况 下 ， 单 选 按钮 和 复 选 
是 以 组 的 形式 出 现 的 。 在 JavaScript 中 , 将 name 属性 值 相同 的 单 选 按钮 或 复 选 框 都 放 在 一 个 数组 中 ， 

这 样 就 可 以 对 某 个 单 选 按钮 组 或 复 选 框 组 进行 操作 。 通 过 for 循环 语句 和 单 选 按钮 或 复 选 框 的 checked 
属性 就 可 以 获取 用 户 选择 的 单 选 按 钮 或 复 选 框 的 值 。 下 面 通过 一 个 实例 来 说 明 如 何 获取 单 选 按钮 和 复 
选 框 的 值 。 

【 例 11.03】 制作 一 个 简单 的 用 户 个 人 信息 页 面 ， 获 取 用 户 的 姓名 、 性 别 、 爱 好 以 及 自我 评价 的 
信息 。 具 体 步 又 如 下 :( 实例 位 置 : 资源 包 \ 源 码 \11\11.03 ) 

(1) 在 页 面 中 定义 用 户 个 人 信息 表单 ， 在 表单 中 添加 文本 框 、 单 选 按钮 、 复 选 框 和 文本 域 等 表单 
元 素 ， 具 体 代码 如 下 : 

01 <form id="form1" name="form1" method="post" onSubmit="getlnfo()"> 

02 <table width="503" border="0" cellspacing="1" bgcolor="#BBBBBB"> 


03 <tr> 

04 <td align="center" height="46" colspan="2" background="images/bg.gif"> 
05 <h2> 请 输入 你 的 个 人 信息 </h2> 

06 </td> 

07 </tr> 

08 <tr> 

09 <td width="82" height="20" align="right" background="images/bg.gif"> 姓 名 : </td> 
10 <td width="414" height="20" background="images/bg.gif’> 

nh] <input type="text" name="name" /> 

本 </td> 

13 </tr> 

14 <tr> 

15 <td height="20" align="right" background="images/bg.gif"> 性 别 : </td> 
16 <td height="20" background="images/bg gif> 
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有 <input type="radio" name="sex" value=" 男 " /> 男 

18 &nbsp;&nbsp;<input type="radio" name="sex" value=" 女 " /> 女 

19 </td> 

20 </tr> 

21 <tr> 

22 <td height="20" align="right" background="images/bg.gif"> 爱 好 : </td> 
23 <td height="20" background="images/bg.gif’> 

24 <input type="checkbox" name="interest" value=" 看 电影 " /> 看 电影 
25 <input type="checkbox" name="interest" value=" 听 音乐 " /> 听 音 乐 
26 <input type="checkbox" name="interest" value=" 演 奏 乐 器 " /> 演奏 乐器 
27 <input type="checkbox" name="interest" value=" 打 篮球 "/> 打 篮球 
28 <input type="checkbox" name="interest" value=" 看 书 " /> 看 书 

29 <input type="checkbox" name="interest" value=" 上 网 " /> 上 网 

30 </td> 

31 </tr> 

32 <tr> 

33 <td align="right" valign="top" background="images/bg.gif"> 自 我 评价 : </td> 
34 <td background="images/bg.gif’> 

35 <textarea name="comment" cols="30" rows="5"></textarea> 

36 </td> 

37 </tr> 

38 <tr> 

39 <td background="images/bg.gif">&nbsp;</td> 

40 <td background="images/bg.gif’> 

41 <input type="submit" name="Submit" value=" 提 交 " /> 

42 <input type="reset" name="Submit2" value=" 重 置 " /> 

43 </td> 

44 </tr> 

45 </table> 

46 </form> 


(2) 定义 getInfo0 函 数 ， 在 函数 中 分 别 获取 用 户 输入 的 姓名 、 选 择 的 性 别 和 爱好 ， 以 及 输入 的 自 
我 评价 信息 ， 并 对 获取 到 的 个 人 信息 进行 连接 ， 具 体 代码 如 下 : 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
11 
12 
13 
14 
15 
16 


<script type="text/javascript"> 


function getInfo(}{ /定义 getlnfo() 函 数 
var message = "™"; /定义 字符 串 变 量 
message += "姓名 : "+ form1.name.value + "\n"; // 获 取 用 户 姓名 并 连接 字符 串 
message += "性 别 :"; // 连 接 字符 串 
for(var i=0; i<form1.sex.length; i++}{ // 循 环 获取 单 选 按钮 
ifform1.sex[].checked){ // 如 果 该 单 选 按钮 被 选中 
message += form1.sex[i].value + "\n"; // 获 取 用 户 性 别 并 连接 字符 串 
} 
1 
message += "爱好 :"; // 连 接 字符 串 
for(var i=0; i<form+1.interest.length; i++ 并 ll/ 循环 获取 复 选 框 
if(form1.interestli].checkedX{ // 如 果 该 复 选 框 被 选中 
message += formt1.interestfi].value + " "; 1/ 获取 用 户 爱 好 并 连接 字符 串 
} 
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message += "\n 自我 评价 : "+ form1.comment.value; // 获 取 用 户 自 我 评价 并 连接 字符 串 
alert(message); // 输 出 个 人 信息 


20 </script> 
运行 结果 如 图 11.3 所 示 。 


人 


条 
i 


图 11.3 获取 用 户 个 人 信息 


11.3.4 下 拉 菜 单 


下 拉 菜 单 主要 是 为 了 节省 页 面 空间 而 设计 的 ， 通 过 <select> 和 <option> 标 记 来 实现 。 菜 单 是 一 种 最 
节省 空间 的 方式 ， 正 常 状态 下 只 能 看 到 一 个 选项 ， 单 击 按钮 打开 菜单 后 才能 看 到 全 部 的 选项 。 


1. 下 拉 菜 单 的 属性 
与 其 他 表单 对 象 的 子 对 象 相同 , 下 拉 菜 单 也 有 自己 的 属性 。 常 用 的 下 拉 菜 单 的 属性 如 表 11.10 所 示 。 


表 11.10 ”下拉 菜单 常用 的 属性 及 说 明 


属 性 说 明 

id 返回 或 设置 下 拉 菜 单 的 id 属性 值 

Dame 返回 下 拉 菜单 的 名 称 

type 返回 下 拉 菜 单 的 类 型 

value 返回 下 拉 菜 单 的 值 

5 该 值 设置 为 te 时 ， 下 拉 菜 单 中 的 选项 会 以 列表 的 方式 显示 ， 此 时 可 以 进行 多 选 ， 该 值 设置 为 false 

时 ， 只 能 进行 单 选 

length 返回 下 拉 菜单 中 的 选项 个 数 

options 返回 一 个 数组 ， 数 组 中 的 元 素 为 下 拉 菜 单 中 的 选项 

selectedIndex | 返回 或 设置 下 拉 菜 单 中 当前 选中 的 选项 在 options[] 数 组 中 的 下 标 

disabled 返回 或 设置 下 拉 菜单 是 否 被 禁用 ， 该 属性 值 为 mue 时 禁用 下 拉 菜 单 ， 该 属性 值 为 false 时 启用 下 拉 菜 单 
-~ 


明 . 加 . 
在 可 以 进行 多 选 的 列表 框 中 ， 按 住 Ctrl 键 就 可 以 实现 选择 多 个 选项 的 功能 。 
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2. 下 拉 菜 单 的 方法 
常用 的 下 拉 菜 单 的 方法 如 表 11.11 所 示 。 


表 11.11 下 拉 菜 单 常用 的 方法 及 说 明 


方 法 说 明 
bna0 | 该 方法 用 于 将 焦点 从 下 拉 菜 单 中 移 开 
focus0 | 该 方法 用 于 将 焦点 赋 给 下 拉 菜 单 

click0 | 该 方法 可 以 模拟 下 拉 菜 单 被 鼠标 单 击 


remove(i) 该 方法 可 以 删除 下 拉 菜 单 中 的 选项 ， 其 中 ， 参 数 i 为 options[] 数 组 中 的 下 标 


3. Option 对 象 


在 HTML 中 ， 创 建 下 拉 菜 单 需要 使 用 select 元 素 和 option 元 素 ，select 元 素 用 于 声明 下 拉 菜 单 ，option 


元 素 用 于 创建 下 拉 菜 单 中 的 选项 。 在 JavaScript 中 ,下拉 菜 单 中 
对 象 。 创 建 下 拉 菜 单 选项 的 构造 函数 如 下 : 

new Option(text,value,defaultSelected,selected) 

参数 说 明 。 

回 text:， 显示 在 下 拉 菜单 选项 中 的 文字 。 

回 value: 下 拉 菜 单 选项 的 值 。 


bh 的 每 一 个 选项 都 可 以 看 作 是 一 个 Option 


回 defaultSelected: 该 参数 是 一 个 布尔 值 ， 用 于 声明 该 选项 是 否 是 下 拉 菜 单 中 的 默认 选项 。 如 果 


该 参数 为 tue， 在 重 置 表 单 时 ， 下 拉 菜 单 会 自动 选中 


该 选项 。 


回 selected: 该 参数 是 一 个 布尔 值 ， 用 于 声明 该 选项 当前 是 否 处 于 被 选中 状态 。 

在 创建 Option 对 象 之 后 ， 可 以 直接 将 其 赋值 给 下 拉 菜 单 的 Option 数组 元 素 。 例 如 ， 表 单 名 称 为 
Imyform， 下 拉 菜 单 名 称 为 myselect， 为 下 拉 菜 单 添加 一 个 下 拉 菜 单 选项 ， 代 码 如 下 : 

document.myform.myselect.options[0] = new Option("text","value"); 


Option 对 象 虽 然 是 下 拉 菜 单 对 象 的 子 对 象 ， 但 该 对 象 也 有 自己 的 属性 。 常 用 的 Option 对 象 的 属性 


如 表 11.12 所 示 。 


表 11.12 Option 对 象 常用 的 属性 及 说 明 


属 性 说 了 明 


defaultSelected 。 | 该 属性 值 为 一 个 布尔 值 ， 用 于 声明 在 创建 该 Option 对 象 时 ， 该 选项 是 否 是 默认 选项 


index | 返回 当前 Option 对 象 在 options[] 数 组 中 的 下 标 


返回 或 设置 当前 Option 对 象 是 否 被 选中 。 该 值 为 tue 时 ， 当 前 Option 对 象 为 被 选中 状态 ;该 


selected 


值 为 false 时 ， 当 前 Option 对 象 为 未 被 选中 状态 


text | 返回 或 设置 选项 中 的 文字 


value 返回 或 设置 选项 中 的 值 


4. 下 拉 菜 单 的 应 用 一 一 简单 的 选 职 位 程序 


如 果 为 select 元 素 设置 了 multiple 属性 ， 下 拉 菜 单 中 的 选项 就 会 以 列表 的 方式 显示 ， 此 时 ， 列 表 框 
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中 的 选项 可 以 进行 多 选 。 在 实际 应 用 中 ， 利 用 列表 框 的 多 选 可 以 实现 随意 添加 、 删 除 其 中 选项 的 功能 。 
下 面 通过 一 个 实例 来 说 明 如 何 添加 、 删 除 列表 框 中 的 选项 。 

【 例 11.04】 ”制作 一 个 简单 的 选择 职位 的 程序 ， 用 户 可 以 在 “可 选 职位 ”列表 框 和 “已 选 职位 ” 
列表 框 之 间 进 行 选项 的 移动 。 具 体 步 又 如 下 :( 实例 位 置 : 资源 包 \ 源 码 \11\11.04 ) 

(1) 在 页 面 中 定义 表单 ， 在 表单 中 添加 “可 选 职位 ”列表 框 和 “已 选 职位 ”列表 框 ， 在 两 个 列表 
框 之 间 添 加 “>>” 按 钮 和 “<<” 按 钮 ， 代 码 如 下 : 


01 <formname="myform"> 


02 <table> 

03 <tr> 

04 <td> 可 选 职 位 </td> 

05 <td></td> 

06 <td> 已 选 职 位 </td> 

07 </tr> 

08 <tr> 

09 <td> 

10 <!- 添 加 “可 选 职 位 ”列表 框 --> 

5 <select name="job" size="6" multiple="multiple"> 
过 <option value=" 歌 手 "> 歌 手 </option> 

13 <option value=" 演 员 "> 演 员 </option> 

14 <option value=" 画 家 "> 画家 </option> 

15 <option value=" 教 师 "> 教师 </option> 

16 <option value=" 公 务 员 "> 公务 员 </option> 

17 <option value=" 职 员 "> 职 员 </option> 

18 </select> 

149 </td> 

20 <td> 

21 <!- 添 加 “>>” 和 “<<” 按 钮 -> 

22 <input type="button" value=">>" onClick="myJob()"><br> 
23 <input type="button" value="<<" onClick="toJob()"> 
24 </td> 

25 <td> 

26 <!- 添 加 “已 选 职位 ”列表 框 -> 

27 <select name="myjob" size="6" multiple="multiple"> 
28 </select> 

29 </td> 

30 </tr> 

31 </table> 

32 </form> 


(2) 定义 myJob0 和 toJob0 两 个 函数 ，myJob0 函 数 用 于 将 “可 选 职位 ”列表 框 中 的 选项 移动 到 “已 
选 职位 ”列表 框 ，toJob0 函 数 用 于 将 “已 选 职位 ”列表 框 中 的 选项 移动 到 “可 选 职位 ”列表 框 ， 具 体 
代码 如 下 : 


01 <scripttype="text/javascript"> 
02 function myJob(){ /定义 myJob() 函 数 


182 


第 11 章 表单 对 和 象 


03 var jobLength = document.myform.job.length; 1/ 获 取 “ 可 选 职位 ”下 拉 菜 单 选项 个 数 

04 for(var i=jobLength-1; i>-1; i-X{ /从 最 后 一 个 选项 开始 循环 

05 if(document.myform.job[i].selected}{ /| 如果 该 选项 被 选中 

06 var myOption = new Option(document.myform.job[i] .text, 
document.myform.job[i].value);// 创 建 Option 对 象 

07 /为 “已 选 职 位 ”下 拉 菜 单 添加 选项 

08 document.myform.myjob.options[document.myform.myjob.options.length] = myOption; 

09 document.myform.job.remove(i); /删除 移动 的 选项 

10 } 

hi] } 

好 二 

13 function toJob(X{ /定义 toJob() 函 数 

14 var myjobLength = document.myform.myjob.length; // 获 取 “ 已 选 职位 ”下 拉 菜单 选项 个 数 

15 for(var i=myjobLength-1; i>-1; i-X{ /从 最 后 一 个 选项 开始 循环 

16 if(document.myform.myjob[i].selectedX{ // 如 果 该 选项 被 选中 

pg var myOption = new Option(document.myform.myjobl[i].text, 
document.myform.myjob[i].value);// 创 建 Option 对 象 

18 /为 “可 选 职位 ”下 拉 菜 单 添加 选项 

19 document.myform.job.options[document.myform.job.options.length] = myOption; 

20 document.myform.myjob.remove(i); /删除 移动 的 选项 

21 } 

22 } 

23 } 

24 </script> 


运行 结果 如 图 11.4 所 示 。 


图 11.4 用 户 选择 职位 
11.4 实 战 


11.4.1 判断 取 票 兑换 码 是 否 正确 


星 哥 在 网 上 买 了 两 张 万 达 影 城 上 映 的 《美女 与 野兽 》 的 电 景 电影 票 的 兑换 码 为 99648500463711， 
现 模拟 自动 取 票 机 取 票 系统 的 功能 ， 判 断 星 哥 取 票 是 否 成 功 ， 运 行 结果 如 图 11.5 所 示 。( 实例 位 置 : 资 
源 包 \ 源 码 \11\ 实 战 \01 ) 


| 
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OD ec omasas *| | 


图 11.5 弹出 取 票 成 功 对 话 框 
11.4.2 ”制作 二 级 联动 菜单 
在 商品 信息 添加 页 面 制作 一 个 二 级 联动 菜单 ， 通 过 二 级 联动 菜单 选择 商品 的 所 属 类 别 ， 当 第 一 个 


菜单 选项 改变 时 ， 第 二 个 菜单 中 的 选项 也 会 随 之 改变 ， 运 行 结果 如 图 11.6 所 示 。( 实例 位 置 : 资源 包 \ 
源码 \1\ 实 战 \02 ) 


Be | a ecode\ry O08n PD- © | BE -um 


文件 四 ”六 错 {E) 下 看 WO。 站 页 产地) 工具 四 帮助 (中 ) 


加 您 当前 的 位 置 :网 站 信息 管理 -》 商 品 信息 滩 加 


| 所 属 类 别 : | 家 用 电器 v| 
商品 名 称 :| 海尔 BCD-258W 
会 员 价 :||2299 

提供 厂商 : | 海尔 集团 


三 开门 ， 风 冷 无 逢 ,2 级 能 效 ， 筝 音节 能 ， 耗 电 
量 0.7s 度 /天 pi 


商品 简介 


:no 


11.6 应 用 二 级 联动 菜单 选择 商品 所 属 类 别 


11.5 人 小 结 


本 章 主要 讲解 了 表单 及 表单 元 素 的 使 用 ， 在 制作 网 页 程序 时 ， 表 单 是 不 可 缺少 的 元 素 之 一 。 通 过 
本 章 的 学 习 ， 读 者 可 以 了 解 表单 中 的 各 种 标记 ， 以 及 通过 JavaScript 语言 访问 表单 及 表单 元 素 等 内 容 。 


>? 


FpE 


图 像 对 象 
( em" 视频 讲解 ，38 分 钟 ) 


图 像 是 Web 页 面 中 非常 重要 的 组 成 部 分 ， 如 果 一 个 网 页 只 用 文本 、 表 格 以 及 
单一 的 颜色 来 表达 是 不 够 的 ，JavaScript 提供 了 图 像 处 理 的 功能 ， 本 章 将 介绍 图 像 


处 理 的 一 


此 功能 。 


通过 学 习 本 章 ， 读 者 主要 事 提 以 下 内 容 : 


dl 
dl 
dl 
dl 


图 像 对 象 的 常用 属性 和 事件 
实现 图 片 的 随机 显示 
实现 图 片 置顶 的 功能 
实现 图 片 的 翻转 效果 


JavaScript 从 入 门 到 精通 ( 微 视频 精 编 版 ) 


12.1 图 像 对 象 概述 . 


在 网 页 中 图 片 的 使 用 非常 普遍 ,只 需要 在 HTML 文件 中 使 用 <img> 标 签 ， 并 将 其 中 的 src 属性 值 设 
置 为 图 片 的 URL 即 可 。 本 节 将 介绍 在 网 页 中 引用 图 片 的 方法 和 图 像 对 象 的 属性 。 


12.1.1 图 像 对 象 介绍 


Document 对 象 的 images 属性 的 返回 值 是 一 个 数组 ， 数 组 中 的 每 一 个 元 素 都 是 一 个 Image 对 象 。 
Image 对 象 就 是 图 像 对 象 。 在 HIML 文档 中 ， 可 能 会 存在 多 张 图 片 ， 在 加 载 文 档 时 ，JavaScript 会 自动 
创建 一 个 images[] 数 组 ， 数 组 中 的 元 素 个 数 是 由 文档 中 的 <img> 标 签 的 个 数 决定 的 。images[] 数 组 中 的 
每 一 个 元 素 都 代表 着 文档 中 的 一 张 图 片 。 

在 操作 图 像 对 象 之 前 ， 首 先 应 当 确定 要 引用 的 图 片 ，JavaScript 中 主要 有 以 下 3 种 引用 图 片 的 方式 。 

回 ”通过 document.images[] 按 编号 访问 ， 例 如 document. images[0]。 

回 ”通过 document.images[imageName] 按 名 称 访问 ， 例 如 document.images["book"]。 

回 ”在 支持 DOM 的 浏览 器 中 ， 使 用 document.getElementById("imageID") 来 定位 要 访问 的 图 片 。 

例如 ， 页 面 中 有 一 张 图 片 ， 代 码 如 下 : 


<img name="flower id="mypic" src="flower.png"> 
要 引用 该 图 片 , 可 以 使 用 document.images[0]、document.images["flower"] 或 者 document.getElementById 
("mypic") 等 方式 。 
12.1.2 图像 对 象 的 属性 
Image 对 象 和 其 他 对 象 一 样 ,也 有 属于 自己 的 一 些 属性 , 这 些 属性 主要 用 于 描述 图 片 的 宽度 、 高 度 
和 边框 等 信息 。 网 页 中 的 Image 对 象 的 属性 如 表 12.1 所 示 。 
表 12.1 Image 对 象 的 属性 


属 性 说 了 明 

border 返回 或 设置 图 片 的 边框 宽度 ， 以 像素 为 单位 

height 返回 或 设置 图 片 的 高 度 ， 以 像素 为 单位 

hspace 返回 或 设置 图 片 左边 和 右边 的 文字 与 图 片 之 间 的 间距 ， 以 像素 为 单位 
lowsrc 返回 或 设置 痊 代 图 片 的 低 分 辩 率 图 片 的 URL 

name 返回 或 设置 图 片 名 称 

BY 返回 或 设置 图 片 URL 

vspace 返回 或 设置 图 片上 面 和 下 面 的 文字 与 图 片 之 间 的 间距 ， 以 像素 为 单位 
width 返回 或 设置 图 片 的 宽度 ， 以 像素 为 单位 

alt 返回 或 设置 鼠标 经 过 图 片 时 显示 的 文字 

complete 判断 图 像 是 否 完全 被 加 载 ， 如 果 图 像 完 全 被 加 载 ， 该 属性 将 返回 true 值 
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【 例 12.01】 本 实例 将 通过 Image 对 象 的 属性 获取 图 片 的 一 些 基 本 信息 , 并 将 这 些 信息 输出 到 页 
面 中 。 代 码 如 下 : ( 实例 位 置 : 资源 包 \ 源 码 \12\12.01 ) 


01 <img width="340" height="138" name="book" src="book.png" border="3"><br><br> 
02 <scripttype="text/javascript"> 


07 ”document.write(" 图 片 URL: 
08 </script> 


运行 结果 如 图 12.1 所 示 。 


: "+document.images[0].name+"<br>"); /输出 图 片 名 称 
: "+document.images[0].width+"<br>"); // 输 出 图 片 宽度 
: "+document.images[0].height+"<br>"); /| 输出 图 片 高 度 
: "+document.images[0].border+"<br>"); // 输 出 图 片 边框 

"+document.images[0].sre); /输出 图 片 URL 


12.1.3 ”图 像 对 象 的 事件 


:3 
: file: NE:Code/SL/11/01book png 


图 12.1 显示 图 片 信息 


Image 对 象 没有 可 以 使 用 的 方法 ， 除 了 一 些 常 用 事件 之 外 ，Image 对 象 还 支持 abort、error 等 事件 ， 
这 些 事件 是 大 多 数 其 他 对 象 都 不 支持 的 。Image 对 象 支持 的 事件 如 表 12.2 所 示 。 


表 12.2 ”Image 对 象 支持 的 事件 


事件 说 了 明 

abort 当 用 户 放弃 加 载 图 片 时 触发 该 事件 
load 成 功 加载 图 片 时 触发 该 事件 
error 在 加 载 图 片 过 程 中 产生 错误 时 触发 该 事件 
click 在 图 片上 单 击 鼠 标 时 触发 该 事件 
dblclick 在 图 片上 双击 鼠标 时 触发 该 事件 
mouseover 当 鼠 标 移动 到 图 片上 时 触发 该 事件 
mouseout 当 鼠 标 从 图 片上 移 开 时 触发 该 事件 
mousedown 在 图 片上 按 下 鼠标 键 时 触发 该 事件 
mouseup 在 图 片上 释放 鼠标 键 时 触发 该 事件 
mousemove 在 图 片上 移动 鼠标 时 触发 该 事件 
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【 例 12.02】 本 实例 将 实现 图 片 置 换 的 功能 。 当 鼠标 指向 图 片 时 ， 该 图 片 会 置换 为 男 一 张 图 片 ， 
当 鼠 标 移出 图 片 时 ， 又 会 变 成 原来 的 图 片 。 代 码 如 下 :( 实例 位 置 : 资源 包 \ 源 码 \12\12.02 ) 


01 <scripttype="text/javascript"> 


02 function changelmage(imageNameX{ /定义 changelmage() 函 数 
03 document.images[imageNamel].src = 'images/book2.jpg'; // 将 图 片 置换 为 book2.jpg 
04 } 

05 function resetImage(imageNameX{ /定义 resetlmage() 函 数 
06 document.images[imageNamel].src = 'images/book1.jpg'; // 将 图 片 置换 为 book1.jpg 
07 } 

08 </script> 


09 <imgname="book1" src="images/book1.jpg" onMouseOver="changelmage('book1")" 
onMouseOut="resetImage('book1")"> 


运行 结果 如 图 12.2 和 图 12.3 所 示 。 


图 12.2 显示 默认 图 片 图 12.3 显示 置换 后 的 图 片 


12.2 图像 对 象 的 应 用 


12.2.1 图 片 的 随机 显示 


在 网 页 中 随机 显示 图 片 可 以 达到 装饰 和 宣传 的 作用 , 例如 随机 变化 的 网 页 背景 和 横幅 广告 图 片 等 。 
使 用 随机 显示 图 片 的 方式 可 以 优化 网 站 的 整体 效果 。 

为 了 可 以 实现 图 片 随机 显示 的 功能 ， 可 以 使 用 Math 对 象 的 random0O 函 数 和 floor0 函 数 。 例 如 ， 定 
义 随机 显示 图 片 的 代码 如 下 : 
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<img name="book" id="imgs"> 
<script type="text/javascript"> 


// 定 义 图 片 数 组 

var test = new Array("image1.gif","image2.gif","image3.gif","image4.gif"); 

var n=Math.floor(Math.random!()*test.length); 1/ 获取 随机 数 作为 数组 下 标 
varimg=document.getElementByld('imgs'"); /获取 图 像 对 象 

img.src=test[n]; // 将 数组 元 素 作为 显示 图 片 的 src 属性 值 
</script> 


上 述 JavaScript 代码 中 首先 定义 一 个 数组 ， 然 后 获取 0 到 数组 长 度 的 随机 数 ， 接 着 使 用 document. 
getElementById(imgs') 来 获取 页 面 中 的 图 像 对 象 ， 最 后 将 随机 获取 的 数组 元 素 作为 图 像 对 象 的 src 属性 
值 ， 实 现 随机 显示 图 片 的 功能 。 

【 例 12.03】 本 实例 将 实现 网 页 背景 随机 变化 的 功能 , 用 户 重 复 打 开 该 网 页 可 能 会 显示 不 同 的 页 
面 背景 ， 同 时 每 隔 一 秒 时 间 ， 图 片 随机 变化 一 次 。 关 键 代 码 如 下 : ( 实例 位 置 资源 包 \ 源 码 \12\12.03 ) 


01 
02 
03 


23 
24 
25 


<script type="text/javascript"> 


function changebg(X{ 
var i = Math.floor(Math.random()*5); // 获 取 0~5 之 间 的 随机 数 
var src ="™"; // 初 始 化 变量 
switch(iX{ 
case 0: // 如 果 随 机 数 为 0 
src = "0.jpg"; /为 变量 src 赋值 
break; /跳出 switch 语句 
case 1: // 如 果 随 机 数 为 1 
src= "1.jpg"; /为 变量 src 赋值 
break; /跳出 switch 语句 
case 2: // 如 果 随 机 数 为 2 
src= "2jpg"; /为 变量 src 赋值 
break; /跳出 switch 语句 
case 3: // 如 果 随 机 数 为 3 
src= "3.jpg"; /为 变量 src 赋值 
break; /跳出 switch 语句 
case 4: // 如 果 随 机 数 为 4 
src = "4.jpg"; /为 变量 src 赋值 
break: /跳出 switch 语句 
| 
document.body.background=src; /将 变量 src 的 值 作为 页 面 的 背景 图 片 
setTimeout("changebg()",1000); /| 每 隔 一 秒 执行 一 次 changebg() 函 数 
} 
</script> 


在 上 述 代码 中 将 0~5 之 间 的 随机 数字 取 整 ， 然 后 使 用 switch 语句 根据 当前 随机 产生 的 值 设置 背景 图 
片 ， 最 后 使 用 setTimeout0 方 法 每 间隔 1000 毫秒 调用 一 次 changebg0 函 数 。 运 行 结果 如 图 12.4 和 图 12.5 


所 示 。 
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天 ] EACoda\S\Il\03\inc PD -0 


文件 四 ”六 强权 看 VY) 次 瑟 闪 内。 工具 四 ” 


图 12.4 按时 间 随 机 变化 的 网 页 背景 1 图 12.5 按时 间 随 机 变化 的 网 页 背景 2 
12.2.2 图片 置顶 


在 浏览 网 页 时 ， 经 常会 看 到 图 片 总 是 置 于 顶端 的 情况 ， 不 管 怎样 拖 动 滚动 条 ， 它 相对 于 浏览 器 的 
位 置 都 不 会 改变 ， 这 样 图 片 既 可 以 起 到 宣传 的 作用 ， 还 不 遮挡 网 页 中 的 主体 内 容 。 

可 以 通过 document 对 象 下 的 documentElement 对 象 中 的 scrollTop 和 scrollLeft 属性 来 获取 当前 页 
面 中 横 纵向 滚动 条 所 卷 去 的 部 分 的 值 ， 然 后 使 用 该 值 定 位 放 入 层 中 的 图 片 位 置 ， 实 现 图 片 置顶 的 功能 。 

【 例 12.04】 为 了 丰富 网 页 的 显示 效果 , 在 页 面 右 侧 项 端 放置 一 张 广 告 图 片 ， 当 拖 动 页 面 右 侧 的 
滚动 条 时 ， 实 现 图 片 总 置 于 项 端的 功能 。 代 码 如 下 : ( 实例 位 置 : 资源 包 \ 源 码 \12\12.04 ) 

01 <divid="Tdiv" style="height:45px; left:0px; position:absolute; top:0px; width:45px; 

z-index:25"> 
02 <inputname="image1"type="image" id="image1" src="mrsoft.jpg" border="0"> 
03 </div> 


04 <p> 

05 <scripttype="text/javascript"> 

06 var ImgW=parselnt(image1.width); 1/ 获取 图 片 的 宽度 

07 function permute(tfloor,Top,left){ 

08 /获取 纵向 滚动 条 滚动 的 距离 

09 var RealTop=parselnt(document.documentElement.scrollTop); 

10 buyTop=Top+RealTop; // 获 取 图 片 在 垂直 方向 的 绝对 位 置 

11 document.allltflioor].style.top=buyTop+"px"; // 设 置 图 片 在 垂直 方向 的 绝对 位 置 

12 // 获 取 图 片 在 水 平方 向 的 绝对 位 置 

43 var buyLeft=parselnt(document.documentElement.scrollLeft)+ 
parselnt(document.documentElement.clientWidth)-ImgW; 

14 document.all[tfloor].styleleft=buyLeft-left+"px"; /设置 图 片 在 水 平方 向 的 绝对 位 置 

15 } 

16 setinterval('permute("Tdiv",2,2)',1); /| 每 隔 一 毫秒 就 执行 一 次 permute() 函 数 

17 </script> 


18 <img src="gougo.jpg"> 


上 述 代码 中 ， 使 用 scrollTop 属性 值 来 修改 层 的 style 样式 中 的 top 属性 ， 使 其 总 置 于 顶端 。 同 时 可 
以 获取 scrollLeft 属性 值 与 网 页 宽度 (网 页 的 宽度 可 以 使 用 clientWidth 属性 来 获取 ) 的 和 ， 然 后 减 去 图 
片 的 宽度 , 使 用 所 得 的 值 来 修改 层 的 style 样式 中 的 left 属性 , 这样 就 可 以 使 图 片 总 置 于 工作 区 的 右 侧 。 
最 后 使 用 setInterval0 方 法 循环 执行 permute0 函 数 。 运 行 结果 如 图 12.6 所 示 。 
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12.6 ”图片 总 置 于 顶端 
12.2.3 ”图片 翻转 效果 


使 用 JavaScript 脚本 和 CSS 样式 中 的 滤 镜 技术 可 以 为 图 片 设置 水 平 、 垂 直 翻转 效果 。 滤 镜 是 CSS 
样式 的 一 种 扩充 ， 使 用 滤 镜 可 以 在 图 片 或 文本 容器 中 实现 阴影 、 模 糊 、 水 平 或 垂直 、 透 明 、 波 纹 等 特 
殊 效 果 。 在 滤 镜 中 可 以 通过 Filter 来 设置 滤 镜 参数 。 

语法 如 下 : 


Filter 滤 镜 名 称 (参数 ) 


其 中 的 参数 用 于 指定 滤 镜 的 显示 效果 。 
如 果 需 要 使 用 滤 镜 效果 ， 可 以 在 各 个 标签 的 style 属性 中 来 设置 滤 镜 。 例 如 : 


<img src="*.gif" width="" height="" style="Filter:filpH()"> 


有 关 滤 镜 的 名 称 与 参数 说 明 如 表 12.3 所 示 。 
表 12.3 ” 滤 镜 的 名 称 与 参数 说 明 


滤 镜 名 称 参数 说 明 

设置 滤 镜 的 透明 度 : 

filter:alpha(opacity=0~100, finishOpacity=0~100, style=0~3. startX=0~100, startY=0~100. finshX=0~100, 
finishY= 0~100) 

滤 镜 参数 说 明 。 

opacity: 表示 透明 度 

finishOpacity: 设置 渐变 透明 度 

style: 表示 透明 区 域 的 形状 。0 表示 统一 形状 ;1 表示 线形 ; 2 表示 放射 状 ;3 表示 长 方形 
startX、startY: 表示 透明 度 的 开始 横 纵 坐 标 

finishXx、finishY: 表示 透明 度 的 结束 横 纵 坐 标 

设置 滤 镜 的 淡 入 淡出 效果 

filter:blendTrans(duration=time) 

参数 说 明 。 

duration: 表示 效果 持续 的 时 间 


alpha 


图 因 图 回回 


blendTrans 


191 


滤 镜 名 称 
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参数 说 明 


blur 


设置 滤 镜 的 模糊 效果 

filter:blur(add=truelfalse., direction=value. strength=value) 
参数 说 明 。 

加 ”add: 确定 图 片 是 否 为 模糊 效果 

回 direction:， 设置 模糊 效果 的 方向 ， 以 度数 为 单位 
加 _strength; 设置 模糊 效果 的 像素 数 


chroma 


设置 指定 颜色 为 透明 状态 
filter:chroma(color=value) 
参数 说 明 。 

color: 指定 颜色 的 颜色 值 


dropShadow 


回 _positive: 设置 其 值 为 rue 表示 为 透明 的 像素 建立 投影 ， 设 置 为 false 表示 不 为 透明 的 像素 建立 投影 


flipH 


filter:flipH 


filpV 


filter:filpV. 


glow 


加 _strength: 用 于 设置 发 光 的 亮度 ， 取 值 在 0-255 之 间 


Bray 


filter:gray 


设置 滤 镜 的 阴影 效果 


filter:dropShadow(color=value. offX=value, offY=value, positive=truelfalse) 


参数 说 明 。 

回 ”color: 表示 阴影 的 颜色 

回 offXK、offY: 表示 阴影 的 偏 移 量 ， 其 值 为 像素 
设置 滤 镜 为 水 平 翻转 效果 

设置 滤 镜 为 垂直 翻转 效果 

设置 滤 镜 为 发 光 效 果 

filter:glow(color=value, strength=value) 

参数 说 明 。 

回 color: 用 于 设置 滤 镜 发 光 的 颜色 

将 可 视 对 象 变 为 灰 度 显 示 


翻转 可 视 对 象 的 色调 和 亮度 ， 创 建 底片 效果 


invert Re 
fliter:invert 
Light 模拟 光源 在 可 视 对 象 上 的 投影 
filter:Light 
设置 透明 膜 的 效果 
Mask filter:Mask(color=value) 
参数 说 明 。 
color: 表示 透明 膜 的 颜色 
RevealTrans | 设置 滤 镜 转换 效果 ， 可 以 使 可 视 化 对 象 显示 或 隐藏 
设置 滤 镜 为 立体 式 阴影 效果 
fliter:shadow(color=value, direction=value) 
shadow 参数 说 明 。 
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回 color:， 表示 阴影 颜色 
加”direction: 表示 阴影 方向 
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滤 镜 名 称 参数 说 明 

设置 滤 镜 的 波形 效果 

filter:wave(add=truelfalse, freq=value. lightStrength=0~100. phase=0~100, strength=value) 
参数 说 明 。 

add:， 表示 是 否 按 正弦 波形 显示 

freq: 设置 波形 的 频率 

lightStrength: 设置 波形 的 光影 效果 

phase: 设置 波形 开始 时 的 偏 移 量 

strength; 设置 波形 的 振幅 

设置 义 光 效果 


filter:xra 


Wave 


图 因 图 四 加 


NC 人 壤 明 


”由 于 浏览 器 的 兼容 性 ， 该 节 中 的 实例 需要 在 下 8 浏览 器 及 其 以 下 版 本 中 才能 看 到 效果 


实现 图 片 翻转 效果 可 以 使 用 fipH 与 fipV 滤 镜 。 
【 例 12.05】 本 实例 用 于 实现 图 片 的 翻转 效果 ， 当 用 户 单 击 “ 水 平 翻 转 ” 按 钮 时 ， 图 片 将 水 
平 翻转 ， 当 用 户 单 击 “ 垂 直 翻 转 ” 按 钮 时 ， 图 片 将 垂直 翻转 。 实 现 步骤 如 下 : (实例 位 置 : 资源 包 \ 
源码 \12\12.05 ) 
(1) 定义 水 平 翻转 的 函数 Hturmn0 和 垂直 翻转 的 函数 Vtum0， 在 水 平 翻转 函数 中 使 用 了 条 件 表达 
式 设 置 图 片 的 水 平 翻转 。 当 图 片 的 滤 镜 值 为 fipH 时 ， 则 使 滤 镜 值 为 空 ， 当 图 片 滤 镜 值 不 为 fipH 时 ， 
则 设置 滤 镜 值 为 人 ipH， 从 而 实现 图 片 水 平 翻转 的 功能 。 同 理 , 在 垂直 翻转 函数 中 也 使 用 了 条 件 表达 式 ， 
当 图 片 的 滤 镜 值 为 fipV 时 ， 则 使 滤 镜 值 为 空当 图 片 滤 镜 值 不 为 fipV 时 ， 则 设置 滤 镜 值 为 fipV， 从 
而 实现 图 片 垂 直 翻 转 的 功能 。 关 键 代 码 如 下 : 
01 <scripttype="text/javascript"> 
02 function Hturn(X{ 
03 image11.style.filter = image11.style.filter =="flipH"?"™:"flipH"; // 设 置 水 平 翻转 
04 
05 2 Vturn(X{ 
06 image22.style.fiter = image22.style filter =="flipV"?"™":"flipV"; /设置 垂直 翻转 
[ 


(2) 在 “水 平 翻转 ”和 “垂直 翻转 ”按钮 的 onClick 事件 中 调用 上 述 函数 。 关 键 代 码 如 下 : 


01 <inputtype="button" name="button1" value=" 水 平 翻转 " onClick="Hturn()"> 
02 ”<input type="button" name="button2" value=" 垂 直 翻转 " onClick="Vturn()"> 


运行 结果 如 图 12.7 所 示 。 
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水 平 翻 转 


水 平 医 转 执行 结果 : 


翻转 


垂直 医 转 执行 结果 : 


图 12.7 图 片 翻转 效果 


12.3 实 战 


12.3.1 图片 验证 码 


在 网 站 后 台 管 理 的 登录 页 面 中 , 以 图 片 方式 显示 一 个 4 位 的 随机 验证 码 , 运行 结果 如 图 12.8 所 示 。 
(实例 位 置 : 资源 包 \ 源 码 \12\ 实 战 \01 ) 


上 四 Ecode\ToAlliW5WnP - 上 
文件 四 ”站 强 (E) 音 看 VM) 效 训 交 (A) 工具 DD 


图 12.8 显示 4 位 图 片 验证 码 


12.3.2 图片 时 钟 的 显示 


实现 图 片 时 钟 的 显示 功能 ， 在 网 页 中 放置 一 组 图 片 ， 这 组 图 片 随 着 系统 时 间 的 更 改 而 变化 ， 运 行 
结果 如 图 12.9 所 示 。( 实例 位 置 : 资源 包 \ 源 码 \12\ 实 战 \02 ) 
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ET-EEE 本 


日 evcoderolloanp - 日 


图 12.9 显示 图 片 时 钟 
12.3.3 ”实现 图 片 无 间断 滚动 


实现 图 片 无 间断 滚动 效果 ， 当 用 户 将 鼠标 经 过 滚动 图 片 时 ， 图 片 停止 滚动 ， 当 用 户 将 鼠标 从 图 片 
上 移 开 时 ， 图 片 又 继续 滚动 ， 运 行 结果 如 图 12.10 所 示 。( 实例 位 置 : 资源 包 \ 源 码 \12\ 实 战 \03 ) 


图 12.10 图片 无 间断 滚动 效果 


12.4 小 结 


本 章 主要 讲解 了 在 JavaScript 中 如 何 使 用 图 像 处 理 对 象 , 网 页 上 视觉 效果 最 好 的 部 分 就 是 图 像 ， 所 
以 ， 图 片 在 网 页 中 是 不 可 缺少 的 内 容 。 掌 握 图 像 处 理 技术 在 Web 程序 开发 中 是 非常 重要 的 。 通 过 本 章 
的 学 习 ， 读 者 应 该 可 以 掌握 一 些 基本 的 图 像 处 理 方法 。 


文档 对 象 模型 ( DOM ) 
( 名 视频 讲解 ，41 分 钟 ) 


文档 对 象 模型 也 可 以 叫 作 DOM， 表 示 Web 页 面 (也 可 以 称 为 文档 ) 中 元 素 
的 层次 关系 。 通 过 它 能 够 以 编程 方式 访问 和 操作 Web 页 面 。 学 习 文 档 对 象 模型 有 
助 于 对 JavaScript 程序 的 开发 和 理解 。 

通过 学 习 本 章 ， 读 者 主要 事 担 以 下 内 容 : 


| 
| 
| 
| 


什么 是 DOM 

DOM 常用 的 节点 属性 

对 节点 的 主要 操作 

获取 文档 中 指定 元 素 的 方法 
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13.1 DOM 概述 


DOM 是 Document Object Model (文档 对 象 模型 ) 的 缩写 ， 它 是 由 W3C (World Wide Web 委员 会 ) 
定义 的 。 下 面 分 别 介绍 每 个 单词 的 含义 。 

回 Document (文档 ) 

创建 一 个 网 页 并 将 该 网 页 添加 到 Web 中 ，DOM 就 会 根据 这 个 网 页 创建 一 个 文档 对 象 。 如 果 没 有 
Document (文档 )，DOM 也 就 无 从 谈 起 。 

回 Object (对 象 ) 

对 象 是 一 种 独立 的 数据 集合 。 例 如 文档 对 象 ， 就 是 文档 中 元 素 与 内 容 的 数据 集合 。 与 某 个 特定 对 
象 相关 联 的 变量 被 称 为 这 个 对 象 的 属性 。 可 以 通过 某 个 特定 对 象 去 调用 的 函数 被 称 为 这 个 对 象 的 方法 。 

回 Model (模型 

在 DOM 中 ， 将 文档 对 象 表示 为 树 状 模型 。 在 这 个 树 状 模型 中 ， 网 页 中 的 各 个 元 素 与 内 容 表现 为 
一 个 个 相互 连接 的 节点 。 

DOM 是 一 种 与 浏览 器 、 平台、 语言 无 关 的 接口 , 通过 DOM 可 以 访问 页 面 中 的 其 他 标准 组 件 . DOM 
解决 了 JavaScript 与 Jscript 之 间 的 冲突 ， 给 开发 者 定义 了 一 个 标准 的 方法 ， 使 他 们 来 访问 站 点 中 的 数 
据 、 脚 本 和 表现 层 对 象 。 

文档 对 象 模 型 采用 的 分 层 结构 为 树 形 结构 ， 以 树 节点 的 方式 表示 文档 中 的 各 种 内 容 。 先 以 一 个 简 
单 的 HTML 文档 说 明 一 下 。 代 码 如 下 : 

01 <html> 

02 <head> 

03 <title> 标 题 内 容 </title> 

04 </head> 

05 <body> 

06 ”<h3> 三 号 标题 </h3> 

07 ”<b> 加 粗 内 容 </b> 

08 </body> 

09 </html> 

运行 结果 如 图 13.1 所 示 。 

以 上 文档 可 以 使 用 图 13.2 对 DOM 的 层次 结构 进行 说 明 。 


<html> 
@g 司 EMcodestlzndex PD » © head> 《body> 
ET 
三 号 标题 <title> <h3> <b> 
标题 内 容 3 号 标题 | | 加 粗 内 容 


图 13.1 输出 标题 和 加 粗 的 文本 图 13.2 文档 的 层次 结构 
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通过 图 13.2 可 以 看 出 ， 在 文档 对 象 模型 中 ， 每 一 个 对 象 都 可 以 称 为 一 个 节点 (Node)， 下 面 介绍 


一 下 几 种 节点 的 概念 。 
加 根 节 点 
在 最 项 层 的 <html> 节 点 ， 称 为 根 节点 。 
回 ” 父 节点 


一 个 节点 之 上 的 节点 是 该 节点 的 父 节 点 (parent)。 例 如 ，<html> 就 是 <head> 和 <body> 的 父 节点 ， 
<head> 就 是 <title> 的 父 节点 。 

加 子 节点 

位 于 一 个 节点 之 下 的 节点 就 是 该 节点 的 子 节点 。 例 如 ，<head> 和 <body> 就 是 <html> 的 子 节点 ， 
<title> 就 是 <head> 的 子 节点 。 

回 兄弟 节点 

如 果 多 个 节点 在 同一 个 层次 ， 并 拥有 着 相同 的 父 节点 ， 这 几 个 节点 就 是 兄弟 节点 (sibling)。 例 如 ， 
<head> 和 <body> 就 是 兄弟 节点 ，<h3> 和 <b> 就 是 兄弟 节点 。 

回 后代 


一 个 节点 的 子 节点 的 结合 可 以 称 为 是 该 节点 的 后 代 〈descendant)。 例 如 ，<head> 和 <body> 就 是 
<html> 的 后 代 ，<h3> 和 <b> 就 是 <body> 的 后 代 。 

加 ”叶子 节点 

在 树 形 结构 最 底部 的 节点 称 为 叶子 节点 。 例 如 ,“ 标 题 内 容 ”“3 号 标题 ”“ 加 粗 内 容 ” 都 是 叶子 
节点 


在 了 解 节点 后 ， 下 面 将 介绍 一 下 文档 模型 中 节点 的 3 种 类 型 。 

加 ”元素 节点 : 在 HIML 中 ，<body>、<p>、<a> 等 一 系列 标记 是 这 个 文档 的 元 素 节点 。 元 素 节点 
组 成 了 文档 模型 的 语义 逻辑 结构 。 

加 ”文本 节点 : 包含 在 元 素 节点 中 的 内 容 部 分 ， 如 <p> 标 签 中 的 文本 等 。 一 般 情 况 下， 不 为 空 的 文 
本 节点 都 是 可 见 并 呈现 于 浏览 器 中 的 。 

回 ”属性 节点 : 元 素 节点 的 属性 ， 如 <a> 标 签 的 href 属性 与 title 属性 等 。 一 般 情况 下 ， 大 部 分 属性 
节点 都 是 隐藏 在 浏览 器 背后 ， 并 且 是 不 可 见 的 。 属 性 节点 总 是 被 包含 于 元 素 节点 当中 。 


13.2 DOM 对 象 节点 属性 


在 DOM 中 通过 使 用 节点 属性 可 以 对 各 节点 进行 查询 ， 查 询 出 各 节点 的 名 称 、 类 型 、 节 点 值 、 子 
节点 和 兄弟 节点 等 。DOM 常用 的 节点 属性 如 表 13.1 所 示 。 


表 13.1 DOM 常用 的 节点 属性 


属 性 说 了 明 
nodeName 节点 的 名 称 
nodeValue 节点 的 值 ， 通 常 只 应 用 于 文本 节点 
nodeT 节点 的 类 型 
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续 表 
属 性 说 有明 
parentNode 返回 当前 节点 的 父 节点 
childNodes 子 节点 列表 
firstChild 返回 当前 节点 的 第 一 个 子 节点 
lastChild 返回 当前 节点 的 最 后 一 个 子 节点 
PreviousSibling 返回 当前 节点 的 前 一 个 兄弟 节点 
nextSibling 返回 当前 节点 的 后 一 个 兄弟 节点 
attributes 元 素 的 属性 列表 


在 对 节点 进行 查询 时 ， 首 先 使 用 getElementById0 方 法 来 访问 指定 id 的 节点 ， 然 后 应 用 nodeName 
属性 、nodeType 属性 和 nodeValue 属性 来 获取 该 节点 的 名 称 、 节 点 类 型 和 节点 的 值 。 另 外 ， 通 过 使 用 
parentNode 属性 、firstChild 属性 、lastChild 属性 、previousSibling 属性 和 nextSibling 属性 可 以 实现 遍历 
文档 树 。 


13.3 ”节点 的 操作 


对 节点 的 操作 主要 有 创建 节点 、 插 入 节点 、 复 制 节点 、 删 除 节 点 和 蔡 换 节点 。 下 面 分 别 对 这 些 操 
作 进行 详细 介绍 。 


13.3.1 创建 节点 


创建 节点 先 通过 使 用 文档 对 象 中 的 createElement0 方 法 和 createTextNode( 方 法 ， 生 成 一 个 新 元 素 ， 
并 生成 文本 节点 。 最 后 通过 使 用 appendChild0 方 法 将 创建 的 新 节点 添加 到 当前 节点 的 末尾 处 。 

appendChild0 方 法 将 新 的 子 节点 添加 到 当前 节点 的 末尾 。 

语法 如 下 : 

obj.appendChild(newChild) 


参数 说 明 。 

newChild: 表示 新 的 子 节点 。 

【 例 13.01】 补 全 古诗 《春晓 》 的 最 后 一 句 。 实 现 步 又 如 下 : ( 实例 位 置 : 资源 包 \ 源 码 \13\13.01 ) 

(1) 在 页 面 中 首先 定义 一 个 div 元 素 ， 其 id 属性 值 为 poemDiv， 在 该 div 元 素 中 再 定义 4 个 div 
元 素 ， 分 别 用 来 输出 古诗 的 标题 和 古诗 的 前 3 句 ， 然 后 创建 一 个 表单 ， 在 表单 中 添加 一 个 用 于 输入 古 
诗 最 后 一 句 的 文本 框 和 一 个 “添加 ”按钮 ， 代 码 如 下 : 

01 <divid="poemDiv"> 

02 <div class="poemtitle"> 春 晓 </div> 

03 <div class="poem"> 春 眠 不 觉 晓 </div> 

04 <div class="poem"> 处 处 闻 障 鸟 </div> 
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05 ”<div class="poem"> 夜 来 风雨 声 </div> 

06 </div> 

07 <p> 

08 <formname="myform"> 

09 请 输入 最 后 一 句 : <input type="text" name="last"> 

10 <input type="button" value=" 添 加 " onClick="completePoem()"> 
11 </form> 


(2) 编写 JavaScript 代码 ， 定 义 函数 completePoem0， 在 函数 中 分 别 应 用 createElement() 方 法 、 
createTextNode0 方 法 和 appendChild0 方 法 将 创建 的 节点 添加 到 指定 的 div 元 素 中 ， 代 码 如 下 : 


01 <script type="textjavascript"> 


02 function completePoem(}{ /定义 completePoem() 函 数 

03 var div = document.createElement('div); /创建 div 元 素 

04 div.className = 'poem'; /为 div 元 素 添 加 CSS 类 

05 var last = myform.last.value; // 获 取 用 户 输入 的 古诗 最 后 一 句 

06 txt=document.createTextNode(last); // 创 建文 本 节点 

07 div.appendChild(txt); // 将 文本 节点 添加 到 创建 的 div 元 素 中 


08 // 将 创建 的 div 元 素 添加 到 id 为 poemDiv 的 div 元 素 中 
09 document.getElementByld(poemDiv).appendChild(div); 


10 } 

11 </script> 

运行 结果 如 图 13.3 和 图 13.4 所 示 。 
| i 本 
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文件 月 六 并 6) 下 看 履 而 A) 工具 站 机 区 (H) 


文件 四 油 强 (二 看 0 收 贡 (A) 工具 中。 可 了 (H) 


请 输入 最 后 一 句 ， 添加 请 输入 最 后 一 句 ， [区 到 知 多 少 ET 


图 13.3 补 全 古诗 之 前 的 效果 图 13.4 补 全 古诗 之 后 的 效果 
13.3.2 插入 节点 


插入 节点 通过 使 用 insertBefore0 方 法 来 实现 。insertBefore0 方 法 将 新 的 子 节点 添加 到 指定 子 节点 的 
前 面 。 

语法 如 下 : 

obj.insertBefore(new,ref) 

参数 说 明 。 

回 new: 表示 新 的 子 节点 。 


里 
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回 ref: 指定 一 个 节点 ， 在 这 个 节点 前 插入 新 的 节点 。 
【 例 13.02】 在 页 面 的 文本 框 中 输入 需要 插入 的 文本 ,然后 通过 单 击 “ 前 插入 ”按钮 将 文本 插入 
页 面 中 。 程 序 代码 如 下 : ( 实例 位 置 : 资源 包 \ 源 码 \13\13.02 ) 


01 <scripttype="text/javascript"> 


02 function crNode(str}{ /创建 节点 的 函数 

03 var newP=document.createElement("p"); /1 创建 p 元素 

04 var newTxt=document.createTextNode(str); /创建 文本 节点 

05 newP.appendChildtnewTxt); // 将 文本 节点 添加 到 创建 的 p 元 素 中 
06 return newP; // 返 回 创建 的 p 元 素 

07 } 

08 function insetNode(nodeld,strj{f /插入 节点 的 函数 

09 var node=document.getElementByld(nodeld); 1! 获取 指定 id 的 元 素 

10 var newNode=crNode(str); /创建 节点 

11 if(node.parentNode) /| 判断 是 否 拥有 父 节 点 

12 node.parentNode.insertBefore(newNode,node); // 将 创建 的 节点 插入 指定 元 素 的 前 面 
13 } 

14 </script> 


15 <body background="bg.gif"> 

16 <h2 id="h"> 在 上 面 插入 节点 </h2> 

全 <form id="frm" name="frm"> 

18 输入 文本 : <input type="text" name="txt" /> 

19 ”<input type="button" value=" 前 插入 " onclick="insetNode('h',document.frm.txt.value);" /> 
20 </form> 

21 </body> 


S| EA\Code\SL\12\02\nc PD - SO 


文件 四 ”站 二 (E) 香 看 W) 收 斋 关 (A) 工具 四 大 过 
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图 13.5 插入 节点 前 图 13.6 插入 节点 后 
13.3.3 ”复制 节点 


复制 节点 可 以 使 用 cloneNode0 方 法 来 实现 。 

语法 如 下 : 

obj.cloneNode(deep) 

参数 说 明 。 

deep: 该 参数 是 一 个 Boolean 值 ， 表 示 是 否 为 深度 复制 。 深 度 复制 是 将 当前 节点 的 所 有 子 节点 全 部 


o 
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复制 ， 当 值 为 tue 时 表示 深度 复制 。 当 值 为 false 时 表示 简单 复制 ， 简 单 复 制 只 复制 当前 节点 ， 不 复制 
其 子 节点 。 

【 例 13.03】 在 页 面 中 显示 一 个 下 拉 菜 单 和 两 个 按钮 , 单 击 两 个 按钮 分 别 实现 下 拉 菜 单 的 简单 复 
制 和 深度 复制 。 程 序 代 码 如 下 :( 实例 位 置 : 资源 包 \ 源 码 \13\13.03 ) 


01 <scripttype="text/javascript"> 
02 function AddRow(bl}{ 


03 var sel=document.getElementByld("shopType"); /获取 指定 id 的 元 素 

04 var newSelect=sel.cloneNode(bl); /复制 节点 

05 var b=document.createElement("br"); /创建 br 元 素 

06 di.appendChild(newSelect); // 将 复制 的 新 节点 添加 到 指定 节点 的 未 尾 
07 di.appendChild(b); // 将 创建 的 br 元 素 添加 到 指定 节点 的 未 尾 
08 } 

09 </script> 

10 <form> 

11 <hr> 

2 <select name="shopType" id="shopType"> 

13 <option value="%"> 请 选择 类 型 </option> 

14 <option value="0"> 数 码 电子 </option> 

15 <option value="1"> 家 用 电器 </option> 

16 <option value="2"> 床 上 用 品 </option> 

17 </select> 

18 <hr> 


19 <divid="di"></div> 

20 <input type="button" value=" 复 制 " onClick="AddRow(false)"/> 

21 ”<input type="button" value=" 深 度 复制 " onClick="AddRow(true)"/> 
22 </form> 


运行 实例 ， 当 单 击 “ 复 制 ” 按 钮 时 只 复制 了 一 个 新 的 下 拉 菜单 ， 并 未 复制 其 选项 ， 结 果 如 图 13.7 
所 示 。 当 单 击 “ 深 度 复制 ”按钮 时 将 会 复制 一 个 新 的 下 拉 菜 单 并 包含 其 选项 ， 结 果 如 图 13.8 所 示 。 


图 13.7 普通 复制 后 图 13.8 深度 复制 后 
13.3.4 删除 节点 


删除 节点 通过 使 用 removeChild0 方 法 来 实现 。 该 方法 用 来 删除 一 个 子 节点 。 
语法 如 下 : 
‘obj.removeChild(oldChild) 


>” 
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参数 说 明 。 

oldChild: 表示 需要 删除 的 节点 。 

【 例 13.04】 通过 DOM 对 象 的 removeChild0 方 法 , 动态 删除 页 面 中 所 选中 的 文本 。 程序 代码 如 
下 : (实例 位 置 : 资源 包 \ 源 码 \13\13.04 ) 


01 <scripttype="text/javascript"> 
02 function delNode(X{ 


03 var deleteN=document.getElementByld('di"); /获取 指定 id 的 元 素 
04 if(deleteN.hasChildNodes()X{ // 判 断 是 否 有 子 节点 
05 deleteN.removeChild(deleteN.lastChild); /删除 节点 

06 } 

07 } 

08 </script> 


09 ”<h2> 删 除 节点 </h2> 
10 ”<div id="di"><p> 少 林 派 掌 门 空 闻 大 师 </p><p> 武 当 派 掌 门 张三丰 </p><p> 峨 眉 派 掌 门 灭绝 师 太 </p></div> 


<form> 
12 <input type="button" value=" 删 除 " onclick="delNode()" /> 
13 </form> 


运行 结果 如 图 13.9 和 图 13.10 所 示 。 
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图 13.9 删除 节点 前 图 13.10 ”删除 节点 后 
13.3.5 ”替换 节点 


替换 节点 可 以 使 用 replaceChild() 方 法 来 实现 。 该 方法 用 来 将 旧 的 节点 替换 成 新 的 节点 。 
语法 如 下 : 


obj.replaceChild(new,old) 


参数 说 明 。 

new: 替换 后 的 新 节点 。 

old: 需要 被 替换 的 旧 节 点 。 

【 例 13.05】 通过 DOM 对 象 的 replaceChild0 方 法 , 将 原来 的 标记 和 文本 蔡 换 为 新 的 标记 和 文本 。 
程序 代码 如 下 : ( 实例 位 置 : 资源 包 \ 源 码 \13\13.05 ) 


10 
bh 
12 
13 
14 
15 
16 
17 
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<script type="text/javascript"> 
function repN(str,bjX 
var rep=document.getElementByld('b1'); // 获 取 指定 id 的 元 素 
if(repX{ // 如 果 指 定 id 的 元 素 存在 
var newNode=document.createElement(bj); /创建 节点 
newNode.id="b1"; // 设 置 节点 的 id 属性 值 
var newText=document.createTextNode(str); /创建 文本 节点 
newNode.appendChild(newText); // 将 文本 节点 添加 到 创建 的 节点 元 素 中 
rep.parentNode.replaceChild(newNode,rep); /车 换 节点 
} 
} 
</script> 
<b id="b1"> 要 被 替换 的 文本 内 容 </b> 
<p> 
输入 标记 : <input id="bj" type="text" size="15" /><br /> 


输入 文本 : <input id="txt" type="text" size="15" /><br /> 
<input type="button" value=" 替 换 " onclick="repN(txt.value,bj.value)" /> 


运行 实例 , 页 面 中 显示 的 文本 如 图 13.11 所 示 。 在 文本 框 中 输入 蔡 换 后 的 标记 和 文本 , 单 击 “ 蔡 换 ” 


按钮 ， 结 


果 如 图 13.12 所 示 。 
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13.11 替换 节点 前 13.12 替换 节点 后 


13.4 获取 文档 中 的 指定 元 素 


下 面 介绍 两 种 直接 搜索 文档 中 指定 元 素 的 方法 。 


通过 元 素 的 id 属性 获取 元 素 


13.4.1 


使 用 Document 对 象 的 getElementById0 方 法 可 以 通过 元 素 的 id 属性 获取 元 素 。 例 如 ， 获 取 文 档 中 
id 属性 值 为 userId 的 元 素 的 代码 如 下 : 


document.getElementByld("userld"); /获取 id 属性 值 为 userld 的 元 素 
【 例 13.06】 在 浏览 网 页 时 ， 经 常会 看 到 在 页 面 的 某 个 位 置 显示 当前 日 期 。 这 种 方式 既 可 填充 页 
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面 效果 ， 也 可 以 方便 用 户 。 本 实例 使 用 getElementById0 方 法 实现 在 页 面 的 指定 位 置 显示 当前 日 期 。 具 
体 步骤 如 下 :( 实例 位 置 : 资源 包 \ 源 码 \13\13.06 ) 

(1) 编写 一 个 HTML 文件 ， 在 该 文件 的 <body> 标 记 中 添加 一 个 id 为 clock 的 <div> 标 记 ， 用 于 显 
示 当 前 日 期 ， 关 键 代 码 如 下 : 


<div id="clock"> 当 前 日 期 : </div> 


(2) 编写 自 定义 的 JavaScript 函数 ， 用 于 获取 当前 日 期 ， 并 显示 到 id 为 clock 的 <div> 标 记 中 ， 具 
体 代码 如 下 : 


01 function clockon(){ 


02 var now=new Date(); // 创 建 日 期 对 象 

03 var year=now.getFullYear(); // 获 取 年 份 

04 var month=now.getMonth(); // 获 取 月 份 

05 var date=now.getDate(); // 获 取 日 期 

06 var day=now.getDay(); // 获 取 星 期 

07 var week; /声明 表示 星期 的 变量 
08 month=month+1; // 获 取 实 际 月 份 


09 // 定 义 星期 数组 
10 Var arr_week=new Array(" 星 期 日 "," 星 期 一 "," 星 期 二 "," 星 期 三 "," 星 期 四 "," 星 期 五 "," 星 期 六 "); 


11 week=arr_week[day]; // 获 取 中 文 星期 
12 time=year+" 年 "+month+" 月 "+date+" 日 "+week; /组合 当前 日 期 
13 var textTime=document.createTextNode(time); // 创 建文 本 节点 
14 document.getElementByld("clock").appendChild(textTime); /显示 当前 日 期 
1 
(3) 编写 JavaScript 代码 ， 在 页 面 载 入 后 调用 clockon0 函 数 ， 具 体 代 码 如 下 : 
window.onload=clockon; // 页 面 载 入 后 调用 函数 


运行 本 实例 ， 将 显示 如 图 13.13 所 示 的 效果 。 


Fe-| 
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当前 日 期 ，2017 年 7 月 22 日 星 基 六 


图 13.13 在 页 面 的 指定 位 置 显示 当前 日 其 
13.4.2 ”通过 元 素 的 name 属性 获取 元 素 


使 用 Document 对 象 的 getElementsByName0 方 法 可 以 通过 元 素 的 name 属性 获取 元 素 , 该 方法 通常 
用 于 获取 表单 元 素 。 与 gefElementById0 方 法 不 同 的 是 ， 使 用 该 方法 的 返回 值 为 一 个 数组 ， 而 不 是 一 个 
元 素 。 如 果 想 通过 name 属性 获取 页 面 中 唯一 的 元 素 ， 可 以 通过 获取 返回 数组 中 下 标 值 为 0 的 元 素 进 
行 获取 。 例 如 ， 页 面 中 有 一 组 单 选 按钮 ，name 属性 均 为 likeRadio， 要 获取 第 一 个 单 选 按钮 的 值 ， 代 码 
如 下 : 
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01 ”<inputtype="radio" name="likeRadio" id="radio" value=" 体 育 " /> 体育 
02 <input type="radio" name="likeRadio" id="radio" value=" 美 术 " /> 美术 
03 ”<input type="radio" name="likeRadio" id="radio" value=" 文 艺 " /> 文艺 
04 <scripttype="text/javascript"> 


05 alert(document.getElementsByName("likeRadio")[0].value);// 获 取 第 一 个 单 选 按钮 的 值 
06 </script> 
【 例 13.07】 在 365 影视 网 中 ， 应 用 Document 对 象 的 getElementsByName() 方 法 和 setInterval() 


方法 实现 电影 图 片 
(1) 在 页 面 中 定义 一 个 <div> 元 素 ， 在 该 元 素 中 定义 两 个 图 片 ， 然 后 为 图 片 添加 超 链接 ， 并 设置 
超 链 接 标签 <a> 的 name 属性 值 为 i， 代 码 如 下 : 

01 <div id=tabs> 


02 <a name="i" href="#"><img src="video/13.png" width="100%" height="320" /></a> 
03 <a name="i" href="#"><img src="video/14.png" width="100%" height="320" /></a> 


04 </div> 


(2) 在 页 面 9 


4 轮换 效果 。 实 现 步骤 如 下 : ( 实例 位 置 : 资源 包 \ 源 码 \13\13.07 ) 


定义 CSS 样式 ， 用 于 控制 页 面 显 示 效果 ， 具 体 代码 参见 资源 包 。 


(3) 在 页 面 9 


编写 JavaScript 代码 ， 应 用 Document 对 象 的 getElementsByName() 方 法 获取 name 


属性 值 为 i 的 元 素 ， 然 后 编写 自 定义 函数 changeimage0， 最 后 应 用 setInterval0 方 法 ， 每 隔 3 秒 钟 就 执 
行 一 次 changeimage0 函 数 。 具 体 代 码 如 下 : 
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01 <scripttype="text/javascript"> 


02 varlen = document.getElementsByName("i"); // 获 取 name 属性 值 为 i 的 元 素 
03 varpos=0; // 定 义 变量 值 为 0 
04 function changeimage(X{ 
05 len[pos].style.display = "none"; /隐藏 元 素 
06 pos++; /变量 值 加 1 
07 if(pos == len.length) pos=0; /变量 值 重 新 定义 为 0 
08 len[pos].style.display = "block"'; /显示 元 素 
09 
10 setinterval(‘changeimage()',3000); /每 隔 3 秒 钟 执行 一 次 changeimage() 函 数 
11 </script> 
运行 本 实例 ， 将 显示 如 图 13.14 所 示 的 运行 结果 。 
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图 13.14 图片 轮换 效果 
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13.5 与 DHTML 相对 应 的 DOM 


我 们 知道 通过 DOM 技术 可 以 获取 网 页 对 象 。 本 节 将 介绍 另外 一 种 获取 网 页 对 象 的 方法 一 一 通过 
DHTML 对 象 模 型 的 方法 。 使 用 这 种 方法 可 以 不 必 了 解 文档 对 象 模型 的 具体 层次 结构 ， 而 是 直接 得 到 
网 页 中 所 需 的 对 象 。 通 过 innerHTML、innerText、outerHTML 和 outerText 属性 可 以 很 方便 地 读 取 和 修 
改 HTML 元 素 内 容 。 


o 
可 培 明 
innerHTML 属性 被 多 数 浏 览 器 所 支持 , 而 innerText、 outerHTML 和 outerText 属性 只 有 IE 浏览 
器 才 支 持 。 


13.5.1 innerHTML 和 innerText 属性 


innerHTML 属性 声明 了 元 素 含 有 的 HTML 文本 ， 不 包括 元 素 本 身 的 开始 标记 和 结束 标记 。 设 置 该 
属性 可 以 用 于 为 指定 的 HTML 文本 蔡 换 元 素 的 内 容 。 

例如 ， 通 过 innerHTML 属性 修改 <div> 标 记 的 内 容 的 代码 如 下 : 

01 <divid="clock"></div> 

02 <scripttype="text/javascript"> 

03 /修改 <div> 标 记 的 内 容 

04 document.getElementByld("clock").innerHTML="2017-<b>12</b>-24"; 

05 </script> 

运行 结果 为 : 

2017-12-24 


innerText 属性 与 innerHTML 属性 的 功能 类 似 ， 只 是 该 属性 只 能 声明 元 素 包 含 的 文本 内 容 ， 即 使 指 
定 的 是 HTML 文本 ， 它 也 会 认为 是 普通 文本 ， 而 原样 输出 。 

使 用 innerHTML 和 innerText 属性 还 可 以 获取 元 素 的 内 容 。 如 果 元 素 只 包含 文本 , 那么 innerHTML 
和 innerText 属性 的 返回 值 相 同 。 如 果 元 素 既 包含 文本 ， 又 包含 其 他 元 素 ， 那 么 这 两 个 属性 的 返回 值 是 
不 同 的 ， 如 表 13.2 所 示 。 


表 13.2 innerHTML 和 innerText 属性 返回 值 的 区 别 


HTML 代码 innerHTML 属性 innerText 属性 
<div> 明 日 科技 </div> "明日 科技 " "明日 科技 " 
<div><b> 明 日 科技 </b></div> "<B> 明 日 科技 </B>" "明日 科技 " 
<div><font color="red"></font></div> "<FONT color=red></FONT>" a 
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在 本 章 中 介绍 了 与 DHTML 相对 应 的 DOM， 其 中 ，innerHTML 属性 最 为 常用 ， 下 面 就 通过 一 个 
具体 的 实例 来 说 明 innerHTML 属性 的 应 用 。 
【 例 13.08】 在 网 页 中 显示 当前 的 时 间 和 分 时 间 候 语 。 实 现 步骤 如 下 : ( 实例 位 置 : 资源 包 \ 源 码 \ 
13\13.08 ) 
(1) 在 页 面 中 添加 两 个 <div> 标 记 ， 这 两 个 标记 的 id 属性 值 分 别 为 time 和 greet， 代 码 如 下 : 
01 ”<div id="time"> 显 示 当 前 时 间 </div> 
02 ”<div id="greet"> 显 示 问 候 语 </div> 
(2) 编写 自 定 义 函 数 ShowTime0， 用 于 在 id 为 time 的 <div> 标 记 中 显示 当前 时 间 ， 在 id 为 greet 
的 <div> 标 记 中 显示 问候 语 。ShowTimeO 函 数 的 具体 代码 如 下 : 
01 function ShowTime(){ 


02 var strgreet = ™"; /初始 化 变量 

03 var datetime = new Date(); // 获 取 当 前 时 间 
04 var hour = datetime.getHours(); // 获 取 小 时 

05 var minu = datetime.getMinutes(); 1/ 获取 分 钟 

06 var seco = datetime.getSeconds(); // 获 取 秒 钟 

07 strtime =hour+":"+minu+"."+seco+" "; /组 合 当前 时 间 
08 if(hour >=0 &8& hour < 8{ /判断 是 否 为 早上 
09 strgreet =" 早 上 好 "; /为 变量 赋值 

10 } 

11 if(hour >=8 && hour < 11X{ /判断 是 否 为 上 午 
12 strgreet =" 上 午 好 "; /为 变量 赋值 

13 } 

14 if(hour >= 11 &8& hour < 13X{ /判断 是 否 为 中 午 
15 strgreet = "中 午 好 "; /为 变量 赋值 

16 } 

17 if(hour >= 13 && hour < 17X{ // 判 断 是 否 为 下 午 
18 strgreet =" 下 午 好 "; /为 变量 赋值 

从 } 

20 if(hour >= 17 && hour < 24X{ /| 判断 是 否 为 晚上 
21 strgreet =" 晚 上 好 "; /为 变量 赋值 

22 

23 window.setTimeout("ShowTime()",1000); /| 每 隔 1 秒 重新 获取 一 次 时 间 


24 document.getElementByld("time").innerHTML=" 现 在 是 : <b>"+strtime+"</b>"; 
25 document.getElementByld("greet").innerText="<b>"+strgreet+"</b>"; 


26. 
(3) 在 页 面 的 载 入 事件 中 调用 ShowTime0 函 数 ， 显 示 当 前 时 间 和 问候 语 ， 具 体 代码 如 下 : 
window.onload=ShowTime; // 在 页 面 载 入 后 调用 ShowTime() 函 数 


运行 本 实例 ， 将 显示 如 图 13.15 所 示 的 运行 结果 。 

从 图 13.15 中 可 以 看 出 ， 当 前 的 时 间 (11:15:56〉 和 问候 语 (中午 好 ) 虽然 都 使 用 了 <b> 标 记 括 起 
来 ， 但 是 由 于 问候 语 使 用 的 是 innerText 属性 设置 的 ， 所 以 <b> 标 记 将 被 作为 普通 文本 输出 ， 而 不 能 
现 文字 加 粗 显示 的 效果 。 从 本 实例 中 ， 可 以 清楚 地 看 到 innerHTML 和 innerText 属性 的 区 别 。 
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图 13.15 分 时 间 候 


13.5.2 ”outerHTML 和 outerText 属性 


outerHTML 和 outerText 属性 与 innerHTML 和 innerText 属性 类 似 ， 只 是 outerHTML 和 outerText 
属性 蔡 换 的 是 整个 目标 节点 ， 也 就 是 这 两 个 属性 还 对 元 素 本 身 进 行 修改 。 
下 面 以 列表 的 形式 给 出 对 于 特定 代码 通过 outerHTML 和 outerText 属性 获取 的 返回 值 ， 如 表 13.3 所 示 。 


表 13.3 outerHTML 和 outerText 属性 返回 值 的 区 别 


HTML 代码 outerHTML 属性 outerText 属性 
<div> 明 日 科技 </div> 


<div id="clock">2011-<b>07</b>-22</div> 
<div id="clock"><font color="red"></font></div> 
《全 注意 
在 使 用 outerHTML 和 outerText 属性 后 ， 原 来 的 元 素 ( 如 <div> 标 记 ) 将 被 替换 成 指定 的 内 容 ， 
这 时 当 使 用 document.getElementById0 方 法 查找 原来 的 元 素 (如 <div> 标 记 ) 时 ， 将 发 现 原来 的 元 素 
(如 <div> 标 记 ) 已 经 不 存在 了 。 


Lo 一 


13.6 实 战 


13.6.1 通过 下 拉 菜 单 更 换 用 户头 像 


将 用 户头 像 定义 在 下 拉 菜 单 中 ， 通 过 改变 下 拉 菜 单 中 的 头像 选项 实现 更 换 头 像 的 功能 ， 运 行 结果 
如 图 13.16 所 示 。( 实例 位 置 : 资源 包 \ 源 码 \13\ 实 战 \01 ) 


图 13.16 通过 下 拉 菜 单 更 换 头 像 


JavaScript 从 入 门 到 精通 ( 微 视频 精 编 版 ) 


13.6.2 ”测试 你 是 否 是 一 个 金庸 迷 


在 页 面 中 设置 3 个 关于 金庸 武侠 小 说 中 的 问题 ， 根 据 答题 结果 测试 你 是 否 是 一 个 金庸 迷 ， 运 行 结 
果 如 图 13.17 所 示 。( 实例 位 置 : 资源 包 \ 源 码 \13\ 实 战 \02 ) 


KodelTzVL4Vndexhtm| 。 襄 ” 忆 | 隔 江 < 他 归于 一 个 全 x 


13.17 测试 你 是 否 是 一 个 金庸 迷 


13.6.3 ”实现 年 月 日 的 联动 


实现 年 月 日 的 联动 的 功能 。 当 改变 “年 ”菜单 和 “月 ”菜单 的 值 时 ,“ 日 ”菜单 的 值 的 范围 也 会 相 
应 的 改变 ， 运 行 结果 如 图 13.18 所 示 。( 实例 位 置 : 资源 包 \ 源 码 \13\ 实 战 \03 ) 


Fe 区: 


自 ENcode\TnoA12\1SVin DD 0 | 大 实现 年 月 的 联动 | 


BEY] 
rr -二 
图 13.18 ”实现 年 月 日 的 联动 
13.7 小 结 


本 章 主要 讲解 了 文档 对 象 模型 的 节点 、 级 别 以 及 如 何 获取 文档 中 的 元 素 和 与 DHTML 相对 应 的 
DOM 等 相关 内 容 。 通 过 本 章 的 学 习 ， 可 以 掌握 页 面 中 元 素 的 层次 关系 ， 对 今后 使 用 JavaScript 语言 编 
程 很 有 帮助 。 
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Window 窗口 对 象 
( 岗 视频 讲解 : S6 分 钟 ) 


在 HTML 中 打开 对 话 框 的 应 用 极为 善 遍 ， 但 也 有 一 些 缺 陷 。 用 户 浏览 器 决定 
对 话 框 的 样式 ， 设 计 者 虽然 左右 不 了 其 对 话 框 的 大 小 及 样式 ， 但 javascript 给 了 程 
序 这 种 控制 权 。 在 JavasScript 中 可 以 使 用 Window 对 象 来 实现 对 对 话 框 的 控制 。 

通过 学 习 本 章 ， 读 者 主要 事 担 以 下 内 容 : 
Window 对 象 中 的 属性 和 方法 
3 种 对 话 框 的 使 用 
打开 和 关闭 窗口 的 方法 
控制 窗口 的 方法 


各 吾 吾 至 
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14.1 Window 对 象 概 述 


Window 对 象 代表 的 是 打开 的 浏览 器 窗口 ， 通 过 Window 对 象 可 以 控制 窗口 的 大 小 和 位 置 、 由 窗口 
弹出 的 对 话 框 、 打 开 窗口 或 关闭 窗口 ， 还 可 以 控制 窗口 上 是 否 显示 地 址 栏 、 工 具 栏 和 状态 栏 等 栏目 。 
对 于 窗口 中 的 内 容 ，Window 对 象 可 以 控制 是 否 重 载 网 页 、 返 回 上 一 个 文档 或 前 进 到 下 一 个 文档 。 

在 框架 方面 ,Window 对 象 可 以 处 理 框架 与 框架 之 间 的 关系 ,并 通过 这 种 关系 在 一 个 框架 处 理 另 一 
个 框架 中 的 文档 。Window 对 象 还 是 所 有 其 他 对 象 的 顶级 对 象 , 通过 对 Window 对 象 的 子 对 象 进行 操作 ， 
可 以 实现 更 多 的 动态 效果 。Window 对 象 作为 对 象 的 一 种 ， 也 有 着 自己 的 方法 和 属性 。 


14.1.1 Window 对 象 的 属性 


顶层 Window 对 象 是 所 有 其 他 子 对 象 的 父 对 象 , 它 出 现在 每 一 个 页 面 上 ,并 且 可 以 在 单个 JavaScript 
应 用 程序 中 被 多 次 使 用 。 

为 了 便于 读者 学 习 ， 本 节 将 以 表格 的 形式 对 Window 对 象 中 的 属性 进行 详细 说 明 。Window 对 象 的 
属性 以 及 说 明 如 表 14.1 所 示 。 


表 14.1 Window 对 象 的 属性 


属 性 说 明 
document 对 话 框 中 显示 的 当前 文档 
frames 表示 当前 对 话 框 中 所 有 frame 对 象 的 集合 
location 指定 当前 文档 的 URL 
name 对 话 框 的 名 字 
status, 状态 栏 中 的 当前 信息 
defaultStatus 状态 栏 中 的 默认 信息 
top 表示 最 项 层 的 浏览 器 对 话 框 
parent 表示 包含 当前 对 话 框 的 父 对 话 框 
opener 表示 打开 当前 对 话 框 的 父 对 话 框 
closed 表示 当前 对 话 框 是 否 关 闭 的 逻辑 值 
self 表示 当前 对 话 框 
screen 表示 用 户 屏幕 ， 提 供 屏 幕 尺寸 、 颜 色 深度 等 信息 
navigator 表示 浏览 器 对 象 ， 用 于 获得 与 浏览 器 相关 的 信息 


14.1.2 Window 对 象 的 方法 


除了 属性 之 外 ，Window 对 象 中 还 有 很 多 方法 。Window 对 象 的 方法 以 及 说 明 如 表 14.2 所 示 。 
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表 14.2 Window 对 象 的 方法 


方 法 说 ”有明 
alertO 弹出 一 个 警告 对 话 框 
confirmO 在 确认 对 话 框 中 显示 指定 的 字符 串 
promptO 弹出 一 个 提示 对 话 框 

打开 新 浏览 器 对 话 框 并 且 显 示 由 URL 或 名 字 引 用 的 文档 ， 并 设置 创建 对 话 框 的 

openO 属性 
closeO) 关闭 被 引用 的 对 话 框 
focus0 将 被 引用 的 对 话 框 放 在 所 有 打开 对 话 框 的 前 面 
blur0 将 被 引用 的 对 话 框 放 在 所 有 打开 对 话 框 的 后 面 
scrollTo(x.y) 把 对 话 框 滚动 到 指定 的 坐标 
scrollBy(offsetx.offsety) 按照 指定 的 位 移 量 滚动 对 话 框 
setTimeout(timer) 在 指定 的 毫秒 数 过 后 ， 对 传递 的 表达 式 求 值 
setInterval(interval) 指定 周期 性 执行 代码 
moveTo(x.y) 将 对 话 框 移动 到 指定 坐标 处 
InoveBy(offsetx.offsety) 将 对 话 框 移动 到 指定 的 位 移 量 处 
resizeTo(x.y) 设置 对 话 框 的 大 小 
resizeBy(offsetx.offsety) 按照 指定 的 位 移 量 设置 对 话 框 的 大 小 


printO 
navigate(URL) 


相当 于 浏览 器 工具 栏 中 的 “打印 ”按钮 
使 用 对 话 框 显 示 URL 指定 的 页 面 


14.1.3 ”Window 对 象 的 使 用 


Window 对 象 可 以 直接 调用 其 方法 和 属性 ， 例 如 : 


window. 属 性 名 
Window. 方 法 名 (参数 列表 ) 


Window 是 不 需要 使 用 new 运算 符 来 创建 的 对 象 。 因 此 ， 在 使 用 Window 对 象 时 ， 只 要 直接 使 用 
window 来 引用 Window 对 象 即 可 ， 代 码 如 下 : 


01 


在 实际 运用 


特定 的 窗口 。 例 如 ， 使 用 self 代表 


字 来 代表 window 


parent. 属 性 名 
parent .方法 名 ( 


window.alert(" 字 符 串 "); 
02 ”window.document.write(" 字 符 串 "); 


// 弹 出 对 话 框 
// 输 出 文字 


bh，JavaSctipt 允许 使 月 


当前 
， 代 码 如 下 : 


参数 列表 ) 


一 个 字符 串 来 给 窗口 命名 ， 也 可 以 使 用 一 些 关 键 字 来 代替 某 些 
窗口 、parent 代表 父 级 窗口 等 。 对 于 这 种 情况 ， 可 以 用 这 些 关 键 
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14.2 对 话 框 


对 话 框 是 为 了 响应 用 户 的 某 种 需求 而 弹出 的 小 窗口 ， 本 节 将 介绍 几 种 常用 的 对 话 框 : 警告 对 话 框 、 
确认 对 话 框 及 提示 对 话 框 。 


14.2.1 警告 对 话 杠 


在 页 面 中 弹出 警告 对 话 框 主要 是 在 <body> 标 签 中 调用 Window 对 象 的 alert() 方 法 实现 的 , 下 面 对 该 
方法 进行 详细 说 明 。 

利用 Window 对 象 的 alert0 方 法 可 以 弹出 一 个 警告 框 ， 并 且 在 警告 框 内 可 以 显示 提示 字符 串 文 本 。 

语法 如 下 : 

window.alert(str) 

参数 str 表示 要 在 警告 对 话 框 中 显示 的 提示 字符 串 。 

用 户 可 以 单 击 警告 对 话 框 中 的 “确定 ”按钮 来 关闭 该 对 话 框 。 不 同 浏览 器 的 警告 对 话 框 样式 可 能 
会 有 些 不 同 。 

【 例 14.01】 在 页 面 中 定义 一 个 函数 ， 当 页 面 载 入 时 就 执行 这 个 函数 ， 应 用 alert( 方 法 弹出 一 个 
警告 对 话 框 。 代 码 如 下 : (实例 位 置 : 资源 包 \ 源 码 \14\14.01 ) 


01 <body onLoad="al()"> 

02 <scripttype="text/javascript"> 

03 function al(){ // 自 定义 函数 

04 window.alert(" 弹 出 警告 对 话 框 ""); // 弹 出 警告 对 话 框 
65 0 

06 </script> 

07 </body> 


运行 结果 如 图 14.1 所 示 。 


注意 

会 警告 对 话 框 是 由 当前 运行 的 页 面 弹出 的 ， 在 对 该 对 话 框 进行 处 理 
之 前 ， 不 能 对 当前 页 面 进行 操作 ， 并 且 其 后 面 的 代码 也 不 会 被 执行 。 
只 有 将 警告 对 话 框 进行 处 理 后 ( 如 单 击 “ 确 定 "按钮 或 者 关闭 对 话 框 )， 
才 可 以 对 当前 页 面 进行 操作 ， 后 面 的 代码 也 才能 继续 执行 。 14.1 警告 对 话 框 的 应 用 


SC 人 


也 可 以 利用 alert( 方 法 对 代码 进行 调试 。 当 再不 清楚 某 段 代码 执行 到 哪里 ， 或 者 不 知道 当前 变 
量 的 取 值 情 况 ， 便 可 以 利用 该 方法 显示 有 用 的 调试 信息 。 


全 ss 
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14.2.2 ”确认 对 话 框 


Window 对 象 的 confirm0 方 法 用 于 弹出 一 个 确认 对 话 框 。 该 对 话 框 中 包含 两 个 按钮 (在 中 文 操作 系 


统 中 显示 为 “确定 ”和 “取消 ” 在 英文 操作 系统 中 显示 为 OK 和 Cancel)。 


语法 如 下 : 
window.confirm(question) 

参数 说 明 。 

回 window: Window 对 象 。 


回 question: 要 在 对 话 框 中 显示 的 纯 文 本 。 通 常 ， 应 该 表达 程序 想 要 让 用 户 回答 的 问题 。 
返回 值 : 如 果 用 户 单 击 了 “确定 ”按钮 ， 返 回 值 为 tue; 如 果 用 户 单 击 了 “取消 ”按钮 ， 返 回 值 


为 false。 


例 14.02 本 实例 主要 应 用 confirm( 方 法 实现 在 页 面 中 弹出 “确定 要 关闭 浏览 器 窗口 吗 ? ”的 对 


话 框 ， 代 码 如 下 : ( 实例 位 置 : 资源 包 \ 源 码 \14\14.02 ) 


14. 


示 框 。 与 警告 框 和 确认 框 不 同 ， 在 提示 框 中 有 一 个 输入 框 。 当 显示 输入 
框 时 ， 


01 <scripttype="text/javascript"> 
02 var bool = window.confirm(" 确 定 要 关闭 浏览 器 窗口 吗 ? ")// 弹 出 确认 对 话 框 并 赋值 变量 


03 if(bool == trueX{ // 如 果 返 回 值 为 rue， 即 用 户 单 击 了 “确定 ”按钮 
04 window.close(); // 关 闭 窗口 

05 用 本 和 

06 </script> 

运行 结果 如 图 14.2 所 示 。 

2.3 提示 对 话 框 【>】 确 二 要 关闭 浏 澳 菇 窗口 局? 
利用 Window 对 象 的 prompt0 方 法 可 以 在 浏览 器 窗口 中 弹出 一 个 提 FE 


在 输入 框 内 显示 提示 字符 串 ， 在 输入 文本 框 显示 默认 文本 ， 并 等 图 14.2 弹出 确认 对 话 框 


待 用 户 输 入 ， 当 用 户 在 该 输入 框 中 输入 文字 ， 并 单 击 “确定 ”按钮 后 ， 


返回 用 户 输入 的 字符 串 ， 当 单 击 “ 取 消 ” 按 钮 时 ， 返 回 null 值 。 


语法 如 下 : 
window.prompt(str1,str2) 


参数 说 明 。 

回 strl: 为 可 选项 。 表 示 字 符 串 〈String)， 指 定 在 对 话 框 内 要 被 显示 的 信息 。 如 果 忽 略 此 参数 ， 
将 不 显示 任何 信息 。 

回 str2: 为 可 选项 。 表 示 字 符 串 (String)， 指 定 对 话 框 内 输入 框 (input) 的 值 (value)。 如 果 忽 
略 此 参数 ， 将 被 设置 为 undefined。 

例如 ， 将 文本 框 中 输入 的 数据 显示 在 提示 对 话 框 中 ， 将 提示 对 话 框 内 输入 框 的 值 作为 文本 框 新 的 
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值 。 代 码 如 下 : 


01 <scripttype="textjavascript"> 
02 function pro(X{ 


03 var message=document.getElementByld("message"); /1/ 获 取 指 定 id 值 的 元 素 
04 message.value=window.prompt(message.value," 返 回 的 信息 ");”// 设 置 文 本 框 的 值 

05 } 

06 </script> 

07 <input id="message" type="text" size="40" value=" 请 在 此 输入 信息 "> 

08 <br><br> 


09 ”<input type="button" value=" 显 示 对 话 框 " onClick="pro()"> 


运行 代码 ， 在 文本 框 中 输入 数据 并 单 击 “ 显 示 对 话 框 ”按钮 ， 会 弹出 一 个 提示 对 话 框 ， 运 行 结果 
如 图 14.3 所 示 。 在 提示 对 话 框 内 的 输入 框 中 输入 数据 ， 单 击 “ 确 定 ” 按 钮 后 将 输入 框 的 值 显示 在 文本 
框 中 ， 运 行 结果 如 图 14.4 所 示 。 


EPE] 
工具 (帮助 (H) 
如 . 


司 EAcode\Sl\13\index. PD EEE 


| 
剖 看 (V) 收 基 六 (A) 工具 中 帮助 ” 
3 


图 14.4 单 击 “ 确 定 ”按钮 后 返回 信息 


14.3 ”打开 与 关闭 窗口 


窗口 的 打开 和 关闭 主要 使 用 Window 对 象 中 的 open0 和 close0 方 法 实现 , 也 可 以 在 打开 窗口 时 指定 
窗口 的 大 小 及 位 置 。 下 面 介绍 窗口 的 打开 与 关闭 的 实现 方法 。 


14.3.1 打开 窗口 


打开 窗口 可 以 使 用 Window 对 象 的 open0 方 法 。 利 用 open0 方 法 可 以 打开 一 个 新 的 窗口 ， 并 在 窗口 
中 装载 指定 URL 地 址 的 网 页 ， 还 可 以 指定 新 窗口 的 大 小 以 及 窗口 中 可 用 的 选项 ， 并 且 可 以 为 打开 的 窗 
口 定义 一 个 名 称 。 

语法 如 下 : 

WindowVar=window.open(url,windowname[,location]); 


参数 说 明 。 
WindowVar: 当前 打开 窗口 的 句柄 。 如 果 open0 方 法 成 功 ， 则 windowVar 的 值 为 一 个 Window 


>? 
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对 象 的 句柄 ， 否 则 windowVar 的 值 是 一 个 空 值 。 

url: 目标 窗口 的 URL。 如 果 URL 是 一 个 空 字符 串 ， 则 浏览 器 将 打开 一 个 空白 窗口 ， 允 许 用 
write() 方 法 创建 动态 HTML。 

回 ”windowname: Window 对 象 的 名 称 。 该 名 称 可 以 作为 属性 值 在 <a> 和 <form> 标 记 的 target 属性 
中 出 现 。 如 果 指 定 的 名 称 是 一 个 已 经 存在 的 窗口 名 称 ， 则 返回 对 该 窗口 的 引用 ， 而 不 会 再 新 
打开 一 个 窗口 。 

回 location: 打开 窗口 的 参数 。 

location 的 可 选 参数 及 说 明 如 表 14.3 所 示 。 


表 14.3 location 的 可 选 参数 及 说 明 


参数 说 明 
top 窗口 顶部 距离 屏幕 顶部 的 像素 数 
left 窗口 左 端 距离 屏幕 左 端的 像素 数 
width 对 话 框 的 宽度 
height 对 话 框 的 高 度 
scrollbars 是 否 显示 滚动 条 
resizable 设 定 对 话 框 大 小 是 否 固定 
toolbar 浏览 器 工具 条 ， 包 括 后 退 及 前 进 按钮 等 
menubar 菜单 条 ， 一 般 包括 有 文件 、 编 辑 及 其 他 一 些 条 目 
location 定位 区 ， 也 叫 地 址 栏 ， 是 可 以 输入 URL 的 浏览 器 文本 区 
direction 更 新 信息 的 按钮 
例如 ， 打 开 一 个 新 窗口 ， 代 码 如 下 : 
window.open("new.html","new"); // 打 开 一 个 新 窗口 
打开 一 个 指定 大 小 的 窗口 ， 代 码 如 下 : 
window.open("new.html","new","height=140,width=690"); /打开 一 个 指定 大 小 的 窗口 
打开 一 个 指定 位 置 的 窗口 ， 代 码 如 下 : 
window.open("new.html","new","top=300,left=200"); // 打 开 一 个 指定 位 置 的 窗口 
打开 一 个 带 滚动 条 的 固定 窗口 ， 代 码 如 下 : 
window.open("new.html","new","scrollbars,resizable"); // 打 开 一 个 带 滚动 条 的 固定 窗口 


打开 一 个 新 的 浏览 器 对 话 框 ， 在 该 对 话 框 中 显示 bookinfo.html 文件 ， 设 置 打开 对 话 框 的 名 称 为 
bookinfo， 并 设置 对 话 框 的 宽度 和 高 度 ， 代 码 如 下 : 

var win=window.open("bookinfo.html","bookinfo","width=600,height=500"); /定义 打开 窗口 的 句柄 

/ 
说 明 


在 实际 应 用 中 ， 除 了 自动 打开 新 窗口 之 外 ， 还 可 以 通过 单 击 图 片 、 单 击 按钮 或 超 链接 的 方式 来 
打开 新 窗口 。 
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【 例 14.03】 本 实例 将 通过 open() 方 法 在 进入 首页 时 弹出 一 个 指定 大 小 及 指定 位 置 的 新 窗口 。 代 
码 如 下 : (实例 位 置 : 资源 包 \ 源 码 \14\14.03 ) 

01 <scripttype="text/javascript"> 

02 /打开 指定 大 小 及 指定 位 置 的 新 窗口 

03 window.open("new.html","new","height=140,width=690,top=100,left=200"); 

04 </script> 


运行 结果 如 图 14.5 所 示 。 


EE 


图 14.5 打开 指定 大 小 及 指定 位 置 的 新 窗口 


稳 s 注 意 
在 使 用 open0 方 法 时 ， 需 要 注意 以 下 几 点 : 
(1) 通常 浏览 器 窗口 中 ， 总 有 一 个 文档 是 打开 的 。 因 而 不 需要 为 输出 建立 一 个 新 文档 。 
(2) 在 完成 对 Web 文档 的 写 操作 后 ， 要 使 用 或 调用 close() 方 法 来 实现 对 输出 流 的 关闭 。 
(3 ) 在 使 用 open() 方 法 来 打开 一 个 新 流 时 ， 可 为 文档 指定 一 个 有 效 的 文档 类 型 ， 有 效 文档 类 
型 包括 text/html、text/gif、text/xim、text/plugin 等 。 


14.3.2 关闭 窗口 


在 对 窗口 进行 关闭 时 ， 主 要 有 关闭 当前 窗口 和 关闭 子 窗口 两 种 操作 ， 下 面 分 别 对 它们 进行 介绍 。 
1. 关闭 当前 窗口 

利用 Window 对 象 的 close0 方 法 可 以 实现 关闭 当前 窗口 的 功能 。 

语法 如 下 : 

window.close(); 

关闭 当前 窗口 ， 可 以 用 下 面 的 任何 一 种 语句 来 实现 : 


window.close(); 
close(); 
this.close(); 


【 例 14.04】 本 实例 将 通过 Window 对 象 的 open0 方 法 打开 一 个 新 窗口 〈 子 窗口 )， 当 用 户 在 该 
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窗口 中 进行 关闭 操作 后 , 关闭 子 窗口 时 , 系统 会 自动 刷新 父 窗 口 来 实现 页 面 的 更 新 。 实现 步 又 如 下 : ( 实 
例 位 置 : 资源 包 \ 源 码 \14\14.04 ) 
(1) 制作 用 于 显示 会 议 信 息 列 表 的 会 议 管理 页 面 index.html， 在 该 页 面 中 加 入 空 的 超 链接 ， 并 在 
其 onclick 事件 中 加 入 JavaScript 脚本 ， 实 现 打 开 一 个 指定 大 小 的 新 窗口 。 关 键 代 码 如 下 : 
01 <ahref="#" onClick="javascript:window.open('new.html',",'width=400,height=220")"> 


02 会 议 记 录 
03 </a> 


(2) 制作 会 议 记录 详细 信息 页 面 new.html， 在 该 页 面 中 通过 “关闭 ”按钮 的 onclick 事件 调用 自 
定义 函数 clo0， 从 而 实现 关闭 弹出 窗口 时 刷新 父 窗 口 。 关 键 代码 如 下 : 


01 <scripttype="text/javascript"> 
02 function clo()f 


03 alert(" 关 闭 子 窗口 !"); // 弹 出 对 话 框 
04 window.openerlocation reload(); /刷新 父 窗口 
05 window.close(); /关闭 当前 窗口 
06 } 

07 </script> 


08 <input type="submit" name="Submit" value=" 关 闭 " onclick="clo();"> 


运行 index.html 页 面 ， 单 击 页 面 中 的 “会 议 记录 ” 超 链 接 ， 将 弹出 会 议 记录 页 面 ， 在 该 页 面 中 通 
过 单 击 “ 关 闭 ” 按 钮 关闭 会 议 记录 页 面 ， 同 时 系统 会 自动 刷新 父 窗口 。 结 果 如 图 14.6 所 示 。 


Ch 分 窑 这 


ee 200 年 新 工作 任务 县 体 的 分 配 以 及 工作 要 求 
的 一 年 里 工 全 全 | 


年 里 工 


新 的 一 
Wy ee 
努力 各， 全 认真 并 且 要 有 责任 心 要 认真 元 成 在 新 的 一 年 
人 但是 必须 要 认真 并 且 要 有 下 任 心 要 认真 成 


| | 


图 14.6 关闭 弹出 窗口 时 刷新 父 窗口 
2. 关闭 子 窗口 


通过 close0 方 法 可 以 关闭 以 前 动态 创建 的 窗口 ， 在 窗口 创建 时 ， 将 窗口 句柄 以 变量 的 形式 进行 保 
存 ， 然 后 通过 close() 方 法 关闭 创建 的 窗口 。 
语法 如 下 : 


windowname.close(); 
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参数 windowname 表示 已 打开 窗口 的 句柄 。 
例如 ， 在 主 窗口 旁边 弹出 一 个 子 窗口 ， 当 单 击 主 窗口 中 的 按钮 后 ， 自 动 关闭 子 窗口 。 代 码 如 下 : 


01 <formname="form1"> 

02 <inputtype="button" name="Button" value=" 关 闭 子 窗口 " onClick="newclose()"> 

03 </form> 

04 <scripttype="text/javascript"> 

05 varwin=window.open("new.html","new","width=300,height=100"); /打开 指定 大 小 的 窗口 
06 function newclose(){ 

07 win.close(); /关闭 打开 的 窗口 

08 } 

09 </script> 


运行 结果 如 图 14.7 所 示 。 


14.7 关闭 子 窗口 


144 控制 窗口 


通过 Window 对 象 除了 可 以 打开 窗口 或 关闭 窗口 之 外 ， 还 可 以 控制 窗口 的 大 小 和 位 置 、 由 窗口 弹 
出 对 话 框 ， 还 可 以 控制 窗口 上 是 否 显示 地 址 栏 、 工 具 栏 和 状态 栏 等 栏目 ， 控 制 返回 上 一 个 文档 或 前 进 
到 下 一 个 文档 ， 甚 至 于 还 可 以 停止 加 载 文档 。 


14.4.1 ”移动 窗口 


下 面 介绍 几 种 移动 窗口 的 方法 。 
1. moveTo() 方 法 


利用 moveTo0 方 法 可 以 将 窗口 移动 到 指定 坐标 (x,y) 处 。 
语法 如 下 : 
window.moveTo(x,y) 


参数 说 明 。 
回 x: 窗口 左上 角 的 x 坐标 。 
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回 y: 窗口 左上 角 的 y 坐标 。 
例如 ， 将 窗口 移动 到 指定 坐标 (500,600) 处 ， 代 码 如 下 : 


window.moveTo(500,600); // 将 窗口 移动 到 坐标 (500,600) 处 


2. resizeTo() 方 法 

利用 resizeTo0 方 法 可 以 将 当前 窗口 改变 成 (x.y) 大 小 ，x、y 分 别 为 宽度 和 高 度 。 
语法 如 下 : 

window.resizeTo(x,y) 


参数 说 明 。 

加 x: 窗口 的 水 平 宽度 。 

回 y: 窗口 的 垂直 高 度 。 

例如 ， 将 当前 窗口 改变 成 (200,300) 大 小 ， 代 码 如 下 : 

window.resizeTo(200,300); // 将 当前 窗口 改变 成 (200,300) 大 小 


3. screen 对 象 
Screen 对 象 是 JavaScript 中 的 屏幕 对 象 ， 反 映 了 当前 用 户 的 屏幕 设置 。 该 对 象 的 常用 属性 如 表 14.4 
所 示 。 


表 14.4 screen 对 象 的 常用 属性 


属 性 说 明 
width 用 户 整个 屏幕 的 水 平 尺寸 ， 以 像素 为 单位 
height 用 户 整 个 屏幕 的 垂直 尺寸 ， 以 像素 为 单位 


pixelDepth | 显示 器 的 每 个 像素 的 位 数 


返回 当前 颜色 设置 所 用 的 位 数 ，1 代表 黑白 ;8 代表 256 色 ; 16 代表 增强 色 ; 24/32 代表 真 彩色 。8 位 
colorDepth | 颜色 支持 256 种 颜色 ，16 位 颜色 〈 通 常 叫 作 “增强 色 ”) 支持 大 概 64000 种 颜色 ， 而 24 位 颜色 ( 通 
常 叫 作 “ 真 彩色 ”) 支持 大 概 1600 万 种 颜色 
availWidth | 返回 窗口 内 容 区 域 的 水 平 尺寸 ， 以 像素 为 单位 
availHeight | 返回 窗口 内 容 区 域 的 垂直 尺寸 ， 以 像素 为 单位 
例如 ， 使 用 screen 对 象 设置 屏幕 属性 ， 代 码 如 下 : 
01 document.write(window.screen.width+"<br>"); // 输 出 屏幕 宽度 
02 document.write(window.screen.height+"<br>"); // 输 出 屏幕 高 度 
03 document.write(window.screen.colorDepth); // 输 出 屏幕 颜色 位 数 
运行 结果 为 : 
1680 
1050 
32 
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【 例 14.05】 本 实例 将 在 页 面 下 方 定义 一 个 TOP 超 链接 ， 单 击 该 超 链 接 ， 弹 出 居中 显示 的 管理 
员 登 录 窗 口 。 实 现 步骤 如 下 : ( 实例 位 置 : 资源 包 \ 源 码 \14\14.05 ) 
(1) 在 页 面 的 适当 位 置 添加 控制 窗口 弹出 的 超 链接 ， 本 实例 中 采用 的 是 图 片 热点 超 链接 ， 关 键 代 
码 如 下 : 
01 <map name="Map"> 
02 <area shape="rect" coords="82,17,125,39" href="#" onClick="manage()"> 
03 <area shape="circle" coords="49,28,14"> 
04 </map> 


(2) 编写 自 定义 的 JavaScript 函数 manage()， 用 于 弹出 新 窗口 并 控制 其 居中 显示 ， 代 码 如 下 : 


01 <scripttype="text/javascript"> 
02 function manage(){ 


03 var hdc=window.open('Login_M.html',","width=322,height=206'); /打开 新 窗口 
04 width=screen.width; /获取 屏幕 宽度 
05 height=screen.height; // 获 取 屏 幕 高 度 
06 hdc.moveTo((width-322)/2,(height-206)/2); /移动 窗口 至 屏幕 居中 
07 } 
08 </script> 
(3) 设计 弹出 窗口 页 面 Login_M.html， 代 码 请 参考 本 书 资源 包 。 
运行 结果 如 图 14.8 所 示 。 
| ul [ES 
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图 14.8 弹出 居中 显示 的 窗口 
14.4.2 ”窗口 滚动 
利用 Window 对 象 的 scroll0 方 法 可 以 指定 窗口 的 当前 位 置 ， 从 而 实现 窗口 滚动 效果 。 
语法 如 下 : 


Scroll(x,y); 


加 
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参数 说 明 。 
回 x: 屏幕 的 横向 坐标 。 

回 y: 屏幕 的 纵向 坐标 。 

Window 对 象 中 有 3 种 方法 可 以 用 来 滚动 窗口 中 的 文档 ， 这 3 种 方法 的 使 用 如 下 : 
window.scroll(x,y); 


window.scrollTo(x,y); 
‘window.scrollBy(x,y); 


以 上 3 种 方法 的 具体 解释 如 下 。 

回 scroll0: 该 方法 可 以 将 窗口 中 显示 的 文档 滚动 到 指定 的 绝对 位 置 。 滚 动 的 位 置 由 参数 x 和 y 
决定 ， 其 中 x 为 要 滚动 的 横向 坐标 ，y 为 要 滚动 的 纵向 坐标 。 两 个 坐标 都 是 相对 文档 的 左上 角 
而 言 的 ， 即 文档 的 左上 角 坐 标 为 (0.0)。 

回 scrollTo0: 该 方法 的 作用 与 scroll0 方 法 完全 相同 。scroll0 方 法 是 JavaScript 1.1 中 所 规定 的 ， 
而 scrollTo() 方 法 是 JavaScript 1.2 中 所 规定 的 。 建 议 使 用 scrollTo0 方 法 。 

回 scrollBy0: 该 方法 可 以 将 文档 滚动 到 指定 的 相对 位 置 上 ， 参 数 x 和 y 是 相对 当前 文档 位 置 的 
坐标 。 如 果 参 数 x 的 值 为 正 数 ， 则 向 右 滚动 文档 ;如 果 参 数 x 值 为 负数 ， 则 向 左 滚动 文档 。 与 
此 类 似 ， 如 果 参 数 y 的 值 为 正 数 ， 则 向 下 滚动 文档 ; 如 果 参 数 y 的 值 为 负数 ， 则 向 上 滚动 文档 。 

例如 ， 当 页 面 出 现 纵向 滚动 条 时 ， 页 面 中 的 内 容 将 从 上 向 下 进行 滚动 ， 当 滚动 到 页 面 最 底 端 时 停 

止 滚动 。 代 码 如 下 : 
01 <img src="1.bmp"> 
02 <scripttype="text/javascript"> 


03 var position = 0; /定义 滚动 的 纵向 坐标 
04 function scroller(){ 

05 position++; /| 纵向 坐标 值 加 1 

06 scrollTo(0,position); /窗口 滚动 

07 clearTimeout(timer); // 中 止 超时 

08 var timer = setTimeout("scroller()",10); // 设 置 超时 

09 } 

10 scroller(); /调用 函数 实现 窗口 滚动 
11 </script> 


运行 结果 如 图 14.9 所 示 。 


国外 evcososunandohp - c| B Oema 


图 14.9 窗口 自动 滚动 
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14.4.3 ”改变 窗口 大 小 


利用 Window 对 象 的 resizeBy0 方 法 可 以 实现 将 当前 窗口 改变 指定 的 大 小 (x,y)， 当 x 和 y 的 值 大 于 
0 时 为 扩大 ， 小 于 0 时 为 缩小 。 

语法 如 下 : 

‘window.resizeBy(x,y) 


参数 说 明 。 

加 ”x: 放大 或 缩小 的 水 平 宽度 。 

回 y: 放大 或 缩小 的 垂直 高 度 。 

【 例 14.06】 本 实例 将 实现 在 打开 index.html 文件 后 ， 在 该 页 面 中 单 击 “ 打 开 一 个 自动 改变 大 小 
的 窗口 ” 超 链接 ， 在 屏幕 的 左上 角 将 会 弹出 一 个 “改变 窗口 大 小 ”的 窗口 ， 并 动态 改变 窗口 的 宽度 和 
高 度 ， 直 到 与 屏幕 大 小 相同 为 止 。 编 写 用 于 实现 打开 窗口 特殊 效果 的 JavaScript 代码 ， 实 现 方法 如 下 : 
(实例 位 置 : 资源 包 \ 源 码 \14\14.06 ) 

首先 自 定 义 函数 openwin0, 用 于 打开 指定 的 窗口 , 并 设置 其 位 置 和 大 小 , 然后 自 定义 函数 resize0)， 
用 于 动态 改变 窗口 的 大 小 ， 关 键 代码 如 下 : 


01 <scripttype="text/javascript"> 


02 var winheight,winsize,x; /| 声明 变量 

03 function openwin(){ 

04 winheight=100; /打开 窗口 的 初始 高 度 

05 winsize=100; /打开 窗 口 的 初始 宽度 

06 x=5; // 设 置 窗口 改变 大 小 的 垂直 高 度 

07 win2=window.open("melody.html",","scrollbars='no'"); /打开 窗口 

08 win2.moveTo(0,0); // 移 动 窗口 至 屏幕 左上 角 

09 win2.resizeTo(100,100); /设置 窗口 大 小 

10 resize(); /调用 改变 窗口 大 小 的 函数 

ke 

12 function resize(){ 

13 if (winheight>=screen.availHeight-3) // 如 果 窗口 高 度 大 于 等 于 屏幕 可 见 高 度 减 3 
14 x=0; // 窗 口 的 高 度 停止 变化 

15 win2.resizeBy(5,x); /改变 窗口 大 小 

16 winheight+=5; /窗口 的 高 度 值 加 5 

体 winsize+=5; /窗口 的 宽度 值 加 5 

18 if (winsize>=screen.width-5X{ 1/ 如 果 窗口 宽度 大 于 等 于 屏幕 宽度 减 5 
19 winheight=100; // 将 winheight 变量 值 恢复 为 初始 值 
20 winsize=100; // 将 winsize 变量 值 恢 复 为 初始 值 
21 return; 1/ 返 回 

22 } 

23 setTimeout("resize()",50); /| 每 隔 50 毫秒 调用 一 次 resize() 函 数 
24 } 

25 </script> 


26 ”<a href="javascript:openwin()"> 打 开 一 个 自动 改变 大 小 的 窗口 </a> 
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运行 结果 如 图 14.10 和 图 14.11 所 示 。 


图 14.10 初始 运行 效果 图 14.11 窗口 逐渐 放大 


14.4.4 ”访问 窗口 历史 


利用 history 对 象 实现 访问 窗口 历史 ，history 对 象 是 一 个 只 读 的 URL 字符 串 数组 ， 该 对 象 主要 用 
来 存储 一 个 最 近 所 访问 网 页 的 URL 地 址 的 列表 。 
语法 如 下 : 
[window.Jhistory.property|method([parameters]) 
history 对 象 的 常用 属性 以 及 说 明 如 表 14.5 所 示 。 
表 14.5 history 对 象 的 常用 属性 


历史 列表 的 长 度 ， 用 于 判断 列表 中 的 入 口 数目 


历史 列表 的 下 一 个 URL 
历史 列表 的 前 一 个 URL 


history 对 象 的 常用 方法 以 及 说 明 如 表 14.6 所 示 。 
表 14.6 history 对 象 的 常用 方法 


进入 指定 的 网 页 


例如 ， 利 用 history 对 象 中 的 back0 和 forward0 方 法 来 引导 用 户 在 页 面 中 跳 转 ， 代 码 如 下 : 
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01 <a href="javascript:window.history.forward();">forward</a> 
02 <a href="javascript:window.history.back();">back</a> 


还 可 以 使 用 history.go0 方 法 指定 要 访问 的 历史 记录 。 若 参数 为 正 数 ， 则 向 前 移动 ， 若 参数 为 负数 ， 


则 向 后 移动 。 例 如 : 


01 ”<a href="javascript:window.history.go(-1);"> 向 后 退 一 次 </a> 
02 ”<a href="javascript:window.history.go(2);"> 向 前 前 进 两 次 /a> 


使 用 history.length 属性 能 够 访问 history 数组 的 长 度 ， 通 过 这 个 长 度 可 以 很 容易 地 转移 到 列表 的 末 


。 例 如 : 


<a href="javascript:window.history.go(window.history.length-1);"> 末 尾 </a> 


14.4.5 ”设置 超时 


为 一 个 窗口 设置 在 某 段 时 间 后 执行 何 种 操作 ， 称 为 设置 超时 。 

Window 对 象 的 setTimeout0 方 法 用 于 设置 一 个 超时 ,以便 在 超出 这 个 时 间 后 触发 某 段 代码 的 运行 。 
语法 如 下 : 

timerld=setTimeout( 要 执行 的 代码 ,以 毫秒 为 单位 的 时 间 ); 

其 中 ,“ 要 执行 的 代码 ”可 以 是 一 个 函数 ， 也 可 以 是 其 他 JavaScript 语句 ;“ 以 毫秒 为 单位 的 时 间 ” 


指 代 码 执行 前 需要 等 待 的 时 间 ， 即 超时 时 间 。 


在 代码 未 执行 前 ， 还 可 以 使 用 Window 对 象 的 clearTimeout0 方 法 来 中 止 该 超时 设置 。 
语法 如 下 : 
clearTimeout(timerld); 


【 例 14.07】 在 一 些 网 站 中 都 会 利用 状态 栏 显示 不 同 的 信息 , 本 实例 将 实现 在 状态 栏 中 显示 日 期 


和 时 间 。 实 现代 码 如 下 :( 实例 位 置 : 资源 包 \ 源 码 \14\14.07 ) 
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01 <scripttype="text/javascript"> 
02 function ShowTime(){ 


03 var today = new Date(); // 创 建 日 期 对 象 

04 var hour = today.getHours(); // 获 取 小 时 数 

05 var minu = today.getMinutes(); // 获 取 分 钟 数 

06 var seco = today.getSeconds(); /获取 秒 数 

07 if(hour < 10) /如果 小 时 数 小 于 10 
08 hour ="0" + hour; // 在 小 时 数 前 面 补 0 
09 if(minu < 10) 1/ 如果 分 钟 数 小 于 10 
10 minu ="0" + minu; // 在 分 钟 数 前 面 补 0 
11 if(seco < 10) 1/ 如 果 秒 数 小 于 10 
12 seco ="0" + seco; /在 秒 数 前 面 补 0 


13 /在 状态 栏 中 显示 日 期 时 间 
14 Window.status=" "+today.getFullYear()+" 年 "+(today.getMonth()+1)+" 月 "+ 
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today.getDate()+" 日 "+hour+" 时 "+minu+" 分 "+seco+" 秒 "+"- a 


15 window.setTimeout("ShowTime();",1000); /每 隔 1 秒 钟 调用 一 次 ShowTime() 函 数 
1 小 

17 ShowTime(); /1 调用 函数 

18 </script> 


运行 结果 如 图 14.12 所 示 。 
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图 14.12 在 状态 栏 中 显示 日 期 时 间 


14.5 窗口 事件 


Window 对 象 支 持 很 多 事件 ， 但 绝 大 多 数 不 是 通用 的 。 本 节 将 介绍 通用 窗口 事件 和 扩展 窗口 事件 。 
1. 通用 窗口 事件 

可 以 通用 于 各 种 浏览 器 的 窗口 事件 很 少 ， 表 14.7 中 列 出 了 这 些 事件 ， 这 些 事件 的 使 用 方法 如 下 : 
window .通用 事件 名 = 要 执行 的 JavaScript 代码 


表 14.7 通用 窗口 事件 


事件 描述 
onfocus 事件 当 浏 览 器 窗口 获得 焦点 时 激活 
onblur 事件 当 浏览 器 窗口 失去 焦点 时 激活 
onload 事件 当 文 档 完 全 载 入 窗口 时 触发 ， 但 需要 注意 ， 事 件 并 非 总 是 完全 同步 
onunload 事件 当 文档 未 载 入 时 触发 
onresize 事件 当 用户 改 变 窗口 大 小 时 触发 
onerror 事件 当 出 现 JavaScript 错误 时 ， 触 发 一 个 错误 处 理事 件 
2. 扩展 窗口 事件 


正 浏览 器 和 Netscape 浏览 器 为 Window 对 象 增加 了 很 多 事件 ， 下 面 列 出 一 些 比较 常用 的 事件 ， 如 
表 14.8 所 示 。 
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表 14.8 常用 扩展 窗口 事件 


事件 描述 
onafterprint 窗口 被 打印 后 触发 
onbeforeprint 窗口 被 打印 或 被 打印 预览 之 前 激活 
onbeforeunload 窗口 未 被 载 入 之 前 触发 ， 发 生 于 onunload 事件 之 前 
ondragdrop 文档 被 拖 到 窗口 上 时 触发 〈 仅 用 于 Netscape) 
onhelp 当 帮 助 键 (通常 是 F1) 被 按 下 时 触发 
onresizeend 调整 大 小 的 进程 结束 时 激活 。 通 常 是 用 户 停止 拖 忠 浏览 器 窗口 边 角 时 激活 
Onresizestart 调整 大 小 的 进程 开始 时 激活 。 通 常 是 用 户 开 始 拖 忠 浏览 器 窗口 边 角 时 激活 
onscroll 滚动 条 往 任意 方向 滚动 时 触发 


14.6.1 打开 影片 详情 页 面 


在 影视 网 的 影片 列表 页 面 ， 单 击 查 看 影片 详情 的 图 片 ， 按 指定 的 大 小 及 位 置 打开 影片 详情 页 面 ， 
运行 结果 如 图 14.13 所 示 。( 实例 位 置 : 资源 包 \ 源 码 \14\ 实 战 \01) 
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图 14.13 打开 影片 详情 页 面 


14.6.2 ”设置 一 个 简单 的 计时 器 


使 用 Window 对 象 的 setTimeout0 〇 和 clearTimeout0 方 法 设置 一 个 简单 的 计时 器 , 当 单 击 “ 开 始 计时 ” 
按钮 后 启动 计时 器 ， 输 入 框 会 从 0 开始 进行 计时 ， 单 击 “ 和 暂停 计时 ”按钮 后 可 以 暂停 计时 ， 运 行 结果 
如 图 14.14 所 示 。( 实例 位 置 : 资源 包 \ 源 码 \14\ 实 战 \02 ) 
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14.14 简单 的 计时 器 


14.7 小 


本 章 主要 讲解 了 Window 窗口 对 象 。 通 过 本 章 的 学 习 ， 


可 以 掌握 通过 JavaScript 语言 中 的 Window 


对 象 对 窗口 进行 简单 的 控制 ， 包 括 对 话 框 、 窗 口 的 打开 与 关闭 、 窗 口 的 大 小 、 窗 口 的 移动 等 相关 操作 。 
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Ajax 技术 
( 勋 视频 讲解 : 31 分 钟 ) 


Ajax 是 Asynchronous JavaScript and XML 的 缩写 ， 意思 是 异步 的 JavaScript 
和 XML。Ajax 并 不 是 一 门 新 的 语言 或 技术 ， 它 是 JavasScript、XML、 C5S、DOM 
等 多 种 已 有 技术 的 组 合 ， 可 以 实现 客户 端的 异步 请 求 操作 ， 从 而 实现 在 不 需要 刷新 
页 面 的 情况 下 与 服务 器 进行 通信 ， 减少 了 用 户 的 等 待 时 间 , 减轻 了 服务 器 和 带宽 的 
负担 ， 提 供 更 好 的 服务 响应 。 本 章 将 对 Ajax 的 应 用 领域 、 技 术 特 点 ， 以 及 所 使 用 
的 技术 进行 介绍 。 

通过 学 习 本 章 ， 读 者 主要 党 提 以 下 内 容 : 


MW 什么 是 Ajax 
Ajax 的 技术 组 成 
MW XMLHttpRequest 对 象 的 使 用 方法 
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15.1 Ajax 概述 


Ajax 是 JavaScript、XML、CSS、DOM 等 多 种 已 有 技术 的 组 合 ， 可 以 实现 客户 端的 异步 请 求 操作 ， 
这 样 可 以 实现 在 不 需要 刷新 页 面 的 情况 下 与 服务 器 进行 通信 ， 从 而 减少 了 用 户 的 等 待 时 间 。Ajax 是 由 
Jesse James Garrett 创造 的 ， 是 Asynchronous JavaScript And XML 的 缩写 ， 即 异步 JavaScript 和 XML 技 
术 。 可 以 说 ，Ajax 是 “增强 的 JavaScript”， 是 一 种 可 以 调用 后 台 服 务 器 获得 数据 的 客户 端 JavaScript 
技术 ， 支 持 更 新 部 分 页 面 的 内 容 而 不 重 载 整个 页 面 。 


15.1.1 Ajax 应 用 案例 


随 着 Web 2.0 时 代 的 到 来 ， 越 来 越 多 的 网 站 开始 应 用 Ajax。 实 际 上 ，Ajax 为 Web 应 用 带 来 的 变化 
我 们 已 经 在 不 知 不 觉 中 体验 过 了 。 例 如 ,Google 地 图 和 百度 地 图 .下 面 就 来 看 看 都 有 哪些 网 站 在 用 Ajax， 
从 而 更 好 地 了 解 Ajax 的 用 途 。 

回 ”百度 搜索 提示 

在 百度 首页 的 搜索 文本 框 中 输入 要 搜索 的 关键 字 时 ， 下 方 会 自动 给 出 相关 提示 。 如 果 给 出 的 提示 
有 符合 要 求 的 内 容 ， 可 以 直接 选择 ， 这 样 可 以 方便 用 户 。 例 如 ， 输 入 “明日 科 ” 后 ， 在 下 面 将 显示 如 
图 15.1 所 示 的 提示 信息 。 

Bai 代 下 度 | 明科 


明日 科技 官网 


15.1 百度 搜索 提示 页 面 
回 ”明日 学 院 选 择 偏好 课程 
进入 明日 学 院 的 首页 ， 单 击 “ 选 择 我 的 偏好 ” 超 链接 时 会 弹出 推荐 的 语言 标签 列表 ， 单 击 列表 中 某 
个 语言 标签 超 链接 ， 在 不 刷新 页 面 的 情况 下 即 可 在 下 方 显示 该 语言 相应 的 课程 ， 效 果 如 图 15.2 所 示 。 


[EE 


15.2 ”明日 学 院 首页 选择 偏好 课程 
15.1.2 Ajax 的 开发 模式 
在 Web 2.0 时 代 以 前 ， 多 数 网 站 都 采用 传统 的 开发 模式 ， 而 随 着 Web 2.0 时 代 的 到 来 ， 越 来 越 多 的 
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网 站 开始 采用 Ajax 开发 模式 。 为 了 让 读者 更 好 地 了 解 Ajax 开发 模式 ， 下 面 将 对 Ajax 开发 模式 与 传统 
开发 模式 进行 比较 。 

在 传统 的 Web 应 用 模式 中 , 页面 中 用 户 的 每 一 次 操作 都 将 触发 一 次 返回 Web 服务 器 的 HTTP 请 求 ， 
服务 器 进行 相应 的 处 理 〈 获 得 数据 、 运 行 与 不 同 的 系统 会 话 ) 后 ， 返 回 一 个 HIML 页 面 给 客户 端 ， 如 
图 15.3 所 示 。 


图 15.3 ”Web 应 用 的 传统 开发 模式 


而 在 Ajax 应 用 中 ， 页 面 中 用 户 的 操作 将 通过 Ajax 引擎 与 服务 器 端 进行 通信 ， 然 后 将 返回 结果 提交 
给 客户 端 页 面 的 Ajax 引擎 ， 再 由 Ajax 引擎 来 决定 将 这 些 数据 插入 到 页 面 的 指定 位 置 ， 如 图 15.4 所 示 。 


15.4 Web 应 用 的 Ajax 开发 模式 


从 图 15.3 和 图 15.4 中 可 以 看 出 ， 对 于 每 个 用 户 的 行为 ， 在 传统 的 Web 应 用 模式 中 ， 将 生成 一 次 
HTTP 请 求 , 而 在 Ajax 应 用 开发 模式 中 , 将 变 成 对 Ajax 引擎 的 一 次 JavaScript 调用 。 在 Ajax 应 用 开发 
模式 中 通过 JavaScript 实现 在 不 刷新 整个 页 面 的 情况 下 ， 对 部 分 数据 进行 更 新 ， 从 而 降低 了 网 络 流量 ， 
给 用 户 带 来 了 更 好 的 体验 。 


15.1.3 Ajax 的 优点 


与 传统 的 Web 应 用 不 同 ，Ajax 在 用 户 与 服务 器 之 间 引 入 一 个 中 间 媒 介 (Ajax 引擎 )， 从 而 消除 了 
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网 络 交 互 过 程 中 的 处 理 一 一 等 待 一 一 处 理 一 一 等 待 的 缺点 ， 从 而 大 大 改善 了 网 站 的 视觉 效果 。 下 面 就 
来 看 看 使 用 Ajax 的 优点 有 哪些 。 
回 “可 以 把 一 部 分 以 前 由 服务 器 负担 的 工作 转移 到 客户 端 ， 利 用 客户 端 闲置 的 资源 进行 处 理 ， 减 
轻 服务 器 和 带宽 的 负担 ， 节 约 空间 和 成 本 。 
回 ”无 刷新 更 新 页 面 ， 从 而 使 用 户 不 用 再 像 以 前 一 样 在 服务 器 处 理 数据 时 ， 只 能 在 死板 的 白 屏 前 
焦急 地 等 待 。Ajax 使 用 XMLHttpRequest 对 象 发 送 请 求 并 得 到 服务 器 响应 ， 在 不 需要 重新 载 
入 整个 页 面 的 情况 下 ， 就 可 以 通过 DOM 及 时 将 更 新 的 内 容 显示 在 页 面 上 。 
回 ”可 以 调用 XML 等 外 部 数据 ， 进 一 步 促 进 页 面 显示 和 数据 的 分 离 。 
回 ”基于 标准 化 的 并 被 广泛 支持 的 技术 ， 不 需要 下 载 插件 或 者 小 程序 ， 即 可 轻松 实现 桌面 应 用 程 
序 的 效果 。 
回 Ajax 没有 平台 限制 。Ajax 把 服务 器 的 角色 由 原本 传输 内 容 转 变 为 传输 数据 ， 而 数据 格式 则 可 
以 是 纯 文本 格式 和 XML 格式 ， 这 两 种 格式 没有 平台 限制 。 
同 其 他 事物 一 样 ，Ajax 也 不 尽 是 优点 ， 它 也 有 一 些 缺 点 ， 具 体 表现 在 以 下 几 个 方面 。 
回 ”大 量 的 JavaScript 代码 ， 不 易 维护 。 
加 ”可视化 设计 上 比较 困难 。 
回 打破 “页 ”的 概念 。 
回 ”给 搜索 引擎 带 来 困难 。 


15.2 ”Ajax 的 技术 组 成 


Ajax 是 XMLHttpRequest 对 象 和 JavaScript、XML 语言 、 DOM、CSS 等 多 种 技术 的 组 合 。 其 中 ， 
只 有 XMLHttpRequest 对 象 是 新 技术 ,其 他 的 均 为 已 有 技术 。 下 面 就 对 Ajax 使 用 的 技术 进行 简要 介绍 。 


15.2.1 XMLHttpRequest 对 象 


Ajax 使 用 的 技术 中 , 最 核心 的 技术 就 是 XMLHttpRequest, 它 是 一 个 具有 应 用 程序 接口 的 JavaScript 
对 象 , 能 够 使 用 超 文本 传输 协议 (HTTP) 连接 一 个 服务 器 , 是 微软 公司 为 了 满足 开发 者 的 需要 , 于 1999 
年 在 正 5.0 浏览 器 中 率先 推出 的 。 现 在 许多 浏览 器 都 对 其 提供 了 支持 ， 不 过 实现 方式 与 IE 有 所 不 同 。 
关于 XMLHttpRequest 对 象 的 使 用 将 在 下 面 进行 详细 介绍 。 


15.2.2 XML 语言 


XML 是 Extensible Markup Language( 可 扩展 的 标记 语言 ) 的 缩写 ， 它 提供 了 用 于 描述 结构 化 数据 
的 格式 ， 适 用 于 不 同 应 用 程序 间 的 数据 交换 ， 而 且 这 种 交换 不 以 预先 定义 的 一 组 数据 结构 为 前 提 ， 增 
强 了 可 扩展 性 。XMLHttpRequest 对 象 与 服务 器 交换 的 数据 ， 通 常 采用 XML 格式 。 下 面 将 对 XML 进 
行 简要 介绍 。 
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1. XML 文档 结构 


XML 是 一 套 定 义 语义 标记 的 规则 ， 也 是 用 来 定义 其 他 标识 语言 的 元 标识 语言 。 使 用 XML 时 ， 首 
先 要 了 解 XML 文档 的 基本 结构 ， 然 后 再 根据 该 结构 创建 所 需 的 XML 文档 。 下 面 先 通过 一 个 简单 的 
XML 文档 来 说 明 XML 文档 的 结构 。placard.xml 文件 的 代码 如 下 : 


01 ”<?xml version="1.0" encoding="gb2312"?> ”<!- 说 明 是 XML 文档 ， 并 指定 XML 文档 的 版 本 和 编码 --> 


02 <placard version="2.0"> < 上 -定义 XML 文档 的 根 元 素 ， 并 设置 version 属性 --> 
03 <description> 公 告 栏 </description> <!-- 定 义 XML 文档 元 素 --> 

04 ”<createTime> 创 建 于 2017 年 12 月 15 日 </createTime> 

05 <infoid="1"> < 上 -定义 XML 文档 元 素 -> 


06 <title> 重 要 通知 </title> 
07 <content><![CDATA[ 今 天 下 午 1:50 将 进行 乒乓 球 比赛 ， 请 各 位 选手 做 好 ;准备 。]]></content> 
08 <pubDate>2017-12-15 16:12:36</pubDate> 


09 ”</info> <!- 定 义 XML 文档 元 素 的 结束 标记 --> 
10 <info id="2"> 
11 <title> 幸 福 </title> 


12 <content><![CDATA[ 一 家 人 永远 在 一 起 就 是 幸福 ]]></content> 

13 <pubDate>2017-12-16 10:19:56</pubDate> 

14 </info> 

15 </placard> < 上 -定义 XML 文档 根 元 素 的 结束 标记 --> 


在 上 面 的 XML 代码 中 ， 第 1 行 是 XML 声明 ， 用 于 说 明 这 是 一 个 XML 文档 ， 并 且 指 定 版 本 号 及 
编码 。 除 第 1 行 以 外 的 内 容 均 为 元 素 。 在 XML 文档 中 ， 元 素 以 树 型 分 层 结构 排列 ， 其 中 <placard> 为 
根 元 素 ， 其 他 的 都 是 该 元 素 的 子 元 素 。 


DT 
在 XML 文档 中 ， 如果 元 素 的 文本 中 包含 标记 符 , 可 以 使 用 CDATA 段 将 元 素 中 的 文本 括 起 来 。 
使 用 CDATA 段 括 起 来 的 内 容 都 会 被 XML 解析 器 当 作 普通 文本 ， 所 以 任何 符号 都 不 会 被 认为 是 标 
记 符 。CDATA 的 语法 格式 如 下 : 


<![CDATA[ 文 本 内 容 ]]> 


CDATA 段 不 能 进行 谈 套 ， 即 CDATA 段 中 不 能 再 包含 CDATA 段 .。 另外， 在 字符 串 “]]>” 之 
间 不 能 有 空格 或 换行 符 。 


2. XML 语法 要 求 


了 解 了 XML 文档 的 基本 结构 后 ， 接 下 来 还 需要 熟悉 创建 XML 文档 的 语法 要 求 。 创 建 XML 文档 
的 语法 要 求 如 下 。 

(1) XML 文档 必须 有 一 个 项 层 元 素 ， 其 他 元 素 必 须 嵌 入 在 顶层 元 素 中 。 

(2) 元 素 嵌 套 要 正确 ， 不 允许 元 素 间 相 互 重合 或 跨越 。 

(3) 每 一 个 元 素 必须 同时 拥有 起 始 标记 和 结束 标记 。 这 点 与 HTML 不 同 ，XML 不 允许 忽略 结束 
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标记 。 

(4) 起 始 标记 中 的 元 素 类 型 名 必须 与 相应 结束 标记 中 的 名 称 完全 匹配 。 

(5) XML 元 素 类 型 名 区 分 大 小 写 ， 而 且 开 始 和 结束 标记 必须 准确 匹配 。 例 如 ， 分 别 定义 起 始 标 
记 <Title>、 结 束 标记 </tite>， 由 于 起 始 标记 的 类 型 名 与 结束 标记 的 类 型 名 不 匹配 ， 说 明 元 素 是 非法 的 。 

(6) 元 素 类 型 名 称 中 可 以 包含 字母 、 数 字 以 及 其 他 字母 元 素 类 型 ， 也 可 以 使 用 非 英文 字符 。 名 称 
不 能 以 数字 或 符号 "-" 开 头 ， 名 称 中 不 能 包含 空格 符 和 冒号 “: ”。 

(7) 元 素 可 以 包含 属性 ， 但 属性 值 必须 用 单 引号 或 双 引 号 括 起 来 ， 但 是 前 后 两 个 引号 必须 一 致 ， 
不 能 一 个 是 单 引号 ， 一 个 是 双 引 号 。 在 一 个 元 素 节点 中 ， 属 性 名 不 能 重复 。 


3. 为 XML 文档 中 的 元 素 定 义 属性 


在 一 个 元 素 的 起 始 标记 中 ， 可 以 自 定义 一 个 或 者 多 个 属性 。 属 性 是 依附 于 元 素 存在 的 。 属 性 值 用 
单 引号 或 者 双 引 号 括 起 来 。 

例如 ， 给 元 素 info 定义 属性 ia， 用 于 说 明 公告 信息 的 ID 号 ， 代 码 如 下 : 

<info id="1"> 


给 元 素 添加 属性 是 为 元 素 提供 信息 的 一 种 方法 。 当 使 用 CSS 样式 表 显 示 XML 文档 时 ， 浏 览 器 不 
会 显示 属性 以 及 其 属性 值 。 若 使 用 数据 绑 定 、HTML 页 中 的 脚本 或 者 XSL 样式 表 显 示 XML 文档 则 可 
以 访问 属性 及 属性 值 。 


多 注意 
相同 的 属性 名 不 能 在 元 素 起 始 标记 中 出 现 多 次 。 


4. XML 的 注释 


注释 是 为 了 便于 阅读 和 理解 ,在 XML 文档 中 添加 的 附加 信息 。 注 释 是 对 文档 结构 或 者 内 容 的 解释 ， 
不 属于 XML 文档 的 内 容 ， 所 以 XML 解析 器 不 会 处 理 注释 内 容 。XML 文档 的 注释 以 字符 串 “<!--” 开 
始 ， 以 字符 串 “--> ”结束 。XML 解析 器 将 忽略 注释 中 的 所 有 内 容 ， 这 样 可 以 在 XML 文档 中 添加 注释 
说 明文 档 的 用 途 ， 或 者 临时 注释 掉 没 有 准备 好 的 文档 部 分 。 


< 注意 
在 XML 文档 中 ,解析 器 将 “-->” 看 作 是 一 个 注释 结束 符号 ， 所 以 字符 囊 “-->” 不 能 出 现在 注 
释 的 内 容 中 ， 只 能 作为 注释 的 结束 符号 。 


15.2.3 ”JavaScript 脚本 语言 


JavaScript 是 一 种 解释 型 的 、 基 于 对 象 的 脚本 语言 ， 其 核心 已 经 嵌入 目前 主流 的 Web 浏览 器 中 。 虽 
然 平时 应 用 最 多 的 是 通过 JavaScript 实现 一 些 网 页 特效 及 表单 数据 验证 等 功能 ， 但 JavaScript 可 以 实现 
的 功能 远 不 止 这 些 。JavaScript 是 一 种 具有 丰富 的 面向 对 象 特性 的 程序 设计 语言 ， 利 用 它 能 执行 许多 复 
杂 的 任务 ， 例 如 ，Ajax 就 是 利用 JavaScript 将 DOM、XHTML (或 HTML)、XML 以 及 CSS 等 技术 综 


JavaScript 从 入 门 到 精通 ( 微 视频 精 编 版 ) 


合 起 来 ， 并 控制 它们 的 行为 。 因 此 ， 要 开发 一 个 复杂 高 效 的 Ajax 应 用 程序 ， 就 必须 对 JavaScript 有 深 
入 的 了 解 。 

JavaScript 不 是 Java 语言 的 精简 版 , 并 且 只 能 在 某 个 解释 器 或 “宿主 ”上 运行 , 如 ASP、PHP、 JSP、 
Internet 浏览 器 或 者 Windows 脚本 宿主 。 

JavaScript 是 一 种 宽松 类 型 的 语言 ， 宽 松 类 型 意味 着 不 必 显 式 定义 变量 的 数据 类 型 。 此 外 ， 在 大 多 
数 情况 下 ，JavaScript 将 根据 需要 自动 进行 转换 。 例 如 ， 如 果 将 一 个 数值 添加 到 由 文本 组 成 的 某 项 (一 
个 字符 串 )， 该 数值 将 被 转换 为 文本 。 


15.2.4 DOM 


DOM 是 Document Object Model (文档 对 象 模型 ) 的 缩写 , 它 为 XML 文档 的 解析 定义 了 一 组 接口 。 
解析 器 读 入 整个 文档 ， 然 后 构建 一 个 驻 留 内 存 的 树 结构 ， 最 后 通过 DOM 可 以 遍历 树 以 获取 来 自 不 同 
位 置 的 数据 ， 可 以 添加 、 修 改 、 删 除 、 查 询 和 重新 排列 树 及 其 分 支 。 另 外 ， 还 可 以 根据 不 同类 型 的 数 
据 源 来 创建 XML 文档 。 在 Ajax 应 用 中 ， 通 过 JavaScript 操作 DOM， 可 以 达到 在 不 刷新 页 面 的 情况 下 
实时 修改 用 户 界 面 的 目的 。 


15.2.5 CSS 


CSS 是 Cascading Style Sheet( 层 登 样式 表 ) 的 缩写 ， 是 用 于 控制 网 页 样式 并 允许 将 样式 信息 与 网 
页 内 容 分 离 的 一 种 标记 性 语言 。 在 Ajax 中 , 通常 使 用 CSS 进行 页 面 布局 ， 并 通过 改变 文档 对 象 的 CSS 
属性 控制 页 面 的 外 观 和 行为 。CSS 是 一 种 Ajax 开发 人 员 所 需要 的 重要 武器 ,提供 了 从 内 容 中 分 离 应 用 
样式 和 设计 的 机 制 。 虽然 CSS 在 Ajax 应 用 中 扮演 至 关 重 要 的 角色 , 但 它 也 是 创建 跨 浏 览 器 应 用 的 一 大 
pk 因为 不 同 的 浏览 器 厂商 支持 不 同 的 CSS 级 别 。 
回 


15.3 XMLHttpRequest 对 象 


XMLHttpRequest 是 Ajax 中 最 核心 的 技术 , 它 是 一 个 具有 应 用 程序 接口 的 JavaScript 对 象 ， 能 够 使 
用 超 文 本 传输 协议 (HTTP) 连接 一 个 服务 器 ， 是 微软 公司 为 了 满足 开发 者 的 需要 ， 于 1999 年 在 正 5.0 
浏览 器 中 率先 推出 的 。 现 在 许多 浏览 器 都 对 其 提供 了 支持 ， 不 过 实现 方式 与 正 有 所 不 同 。 使 用 
XMLHttpRequest 对 象 ，Ajax 可 以 像 桌面 应 用 程序 一 样 只 同 服务 器 进行 数据 层面 的 交换 ， 而 不 用 每 次 都 
刷新 页 面 ， 也 不 用 每 次 都 将 数据 处 理 的 工作 交 给 服务 器 来 做 ， 这 样 既 减轻 了 服务 器 负担 ， 又 加 快 了 响 
应 速度 、 缩 短 了 用 户 等 待 的 时 间 。 


15.3.1 XMLHttpRequest 对 象 的 初始 化 


在 使 用 XMLHttpRequest 对 象 发 送 请 求 和 处 理 响应 之 前 ， 首 先 需 要 初始 化 该 对 象 ， 由 于 
XMLHttpRequest 不 是 一 个 W3C 标准 ， 所 以 对 于 不 同 的 浏览 器 ， 初 始 化 的 方法 也 是 不 同 的 。 通 常情 况 
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下 ， 初 始 化 XMLHttpRequest 对 象 只 需要 考虑 两 种 情况 ， 一 种 是 正 浏览 器 ， 另 一 种 是 非 正 浏览 器 ， 下 
面 分 别 进行 介绍 。 

正 浏览 器 

正 浏览 器 把 XMLHttpRequest 实例 化 为 一 个 ActiveX 对 象 。 具 体 方法 如 下 : 

var http_request = new ActiveXObject("Msxml2.XMLHTTP"); 

或 者 

var http_request = new ActiveXObject("Microsoft.XMLHTTP"); 


在 上 面 的 语法 中 ,Msxml2.XMLHTTP 和 MicrosoftXMLHTTP 是 针对 正 浏览 器 的 不 同 版 本 而 进行 
设置 的 ， 目 前 比较 常用 的 是 这 两 种 。 

回 非 正 浏览 器 

非 正 浏览 器 (如 Firefox、Opera、Mozilla、Safari) 把 XMLHttpRequest 对 象 实例 化 为 一 个 本 地 JavaScript 
对 象 。 具 体 方法 如 下 : 

var http_request = new XMLHttpRequest(); 


为 了 提高 程序 的 兼容 性 ， 可 以 创建 一 个 跨 浏览 器 的 XMLHttpRequest 对 象 。 创 建 一 个 跨 浏览 器 的 
XMLHttpRequest 对 象 其 实 很 简单 ， 只 需要 判断 一 下 不 同 浏览 器 的 实现 方式 ， 如 果 浏 览 器 提供 了 
XMLHttpRequest 类 ， 则 直接 创建 一 个 该 类 的 实例 ， 否 则 实例 化 一 个 ActiveX 对 象 。 具 体 代码 如 下 : 

01 <scripttype="text/javascript"> 


02 if (window.XMLHttpRequest) { // 非 IE 浏览 器 
03 http_request = new XMLHttpRequest(); 

04 } else if (window.ActiveXObject) { JIE 浏览 器 
05 try{ 

06 http_request = new ActiveXObject("Msxml2.XMLHTTP"); 

07 } catch (e){ 

08 try{ 

09 http_request = new ActiveXObject("Microsoft.XMLHTTP"); 
10 } catch (e) 0 

11 } 

12 } 

13 </script> 


在 上 面 的 代码 中 ， 调 用 window.ActiveXObject 将 返回 一 个 对 象 ， 或 是 null， 在 站 语句 中 ， 会 把 返 
回 值 看 作 是 true 或 false (如果 返回 的 是 一 个 对 象 ， 则 为 tue; 否则 返回 null， 则 为 false )。 


7 
SC3 昌 
由 于 JavaScript 具有 动态 类 型 特性 ， 而 且 XMLHttpRequest 对 象 在 不 同 浏览 器 上 的 实例 是 兼容 
的 ， 所 以 可 以 用 同样 的 方式 访问 XMLHttpRequest 实例 的 属性 的 方法 ， 不 需要 考虑 创建 该 实例 的 方 
法 是 什么 。 
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15.3.2 XMLHttpRequest 对 象 的 常用 属性 

XMLHttpRequest 对 象 提供 了 一 些 常 用 属性 , 通过 这 些 属性 可 以 获取 服务 器 的 响应 状态 及 响应 内 容 
等 。 下 面 将 对 XMLHttpRequest 对 象 的 常用 属性 进行 介绍 。 

1. 指定 状态 改变 时 所 触发 的 事件 处 理 器 的 属性 


XMLHttpRequest 对 象 提供 了 用 于 指定 状态 改变 时 所 触发 的 事件 处 理 器 的 属性 onreadystatechange。 
在 Ajax 中 ， 每 个 状态 改变 时 都 会 触发 这 个 事件 处 理 器 ， 通 常会 调用 一 个 JavaScript 函数 。 
例如 , 通过 下 面 的 代码 可 以 实现 当 指定 状态 改变 时 所 要 和 触发 的 JavaScript 函数 , 这 里 为 getResult(O。 


http_request.onreadystatechange = getResult; /|/ 当 状态 改变 时 执行 getResult() 函 数 


2. 获取 请 求 状态 的 属性 


XMLHttpRequest 对 象 提 供 了 用 于 获取 请 求 状 态 的 属性 readyState， 该 属性 共 包 括 5 个 属性 值 ， 如 
表 15.1 所 示 。 


表 15.1 readyState 属性 的 属性 值 


在 实际 应 用 中 ， 该 属性 经 常用 于 判断 请 求 状态 ， 当 请 求 状 态 等 于 4， 也 就 是 为 完成 时 ， 再 判断 请 求 
是 否 成 功 ， 如 果 成 功 将 开始 处 理 返 回 结果 。 


3. 获取 服务 器 的 字符 串 响应 的 属性 


XMLHttpRequest 对 象 提 供 了 用 于 获取 服务 器 响应 的 属性 responseText， 表 示 为 字符 串 。 例 如 ， 获 
取 服 务 器 返回 的 字符 串 响 应 ， 并 赋值 给 变量 可 以 使 用 下 面 的 代码 : 
var h=http_request.responseText; 1/ 获取 服务 器 返回 的 字符 串 响应 


在 上 面 的 代码 中 ，http_request 为 XMLHttpRequest 对 象 。 
4. 获取 服务 器 的 XML 响应 的 属性 


XMLHttpRequest 对 象 提供 了 用 于 获取 服务 器 响应 的 属性 responseXML， 表 示 为 XML。 这 个 对 象 
可 以 解析 为 一 个 DOM 对 象 。 例 如 ， 获 取 服 务 器 返回 的 XML 响应 ， 并 赋值 给 变量 xmldoc 可 以 使 用 下 
面 的 代码 : 

var xmldoc = http_requestresponseXML; // 获 取 服 务 器 返回 的 XML 响应 


在 上 面 的 代码 中 ，http_request 为 XMLHttpRequest 对 象 。 
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5. 返回 服务 器 的 HTTP 状态 码 的 属性 


XMLHttpRequest 对 象 提供 了 用 于 返回 服务 器 的 HITP 状态 码 的 属性 status。 

语法 如 下 : 

http_request.status 

参数 说 明 。 

http_request: XMLHttpRequest 对 象 。 

返回 值 : 长 整 型 的 数值 ， 代 表 服 务 器 的 HTTP 状态 码 。 常 用 的 状态 码 如 表 15.2 所 示 。 


表 15.2 status 属性 的 状态 码 


400 错误 的 请 求 


人 0 注意 
status 属性 只 能 在 send() 方 法 返回 成 功 时 才 有 效 。 


status 属性 常用 于 当 请 求 状 态 为 完成 时 ， 判 断 当前 的 服务 器 状态 是 否 成 功 。 例 如 ， 当 请 求 完成 时 ， 
判断 请 求 是 否 成 功 的 代码 如 下 : 


01 <scripttype="text/javascript"> 


02 if (http_request.readyState == 4) { 1/ 当 请 求 状态 为 完成 时 

03 if (http_request.status == 200) { // 请 求 成 功 ， 开 始 处 理 返回 结果 
04 alert(" 请 求 成 功 ! "); 

05 }else{ // 请 求 未 成 功 

06 alert(" 请 求 未 成 功 ! "); 

07 } 

08 } 

09 </script> 


15.3.3 XMLHttpRequest 对 象 的 常用 方法 

XMLHttpRequest 对 象 提供 了 一 些 常 用 的 方法 ， 通 过 这 些 方法 可 以 对 请 求 进行 操作 。 下 面 对 
XMLHttpRequest 对 象 的 常用 方法 进行 介绍 。 

1. 创建 新 请 求 的 方法 


open0 方 法 用 于 设置 进行 异步 请 求 目标 的 URL、 请 求 方法 以 及 其 他 参数 信息 。 
语法 如 下 : 


open("method","URL"[,asyncFlag[,"userName"[, "password"]]]) 
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open() 方 法 的 参数 说 明 如 表 15.3 所 示 。 
表 15.3 open() 方 法 的 参数 说 明 


参数 说 ”有 明 

method | ”用 于 指定 请 求 的 类 型 ， 一 般 为 GET 或 POST 

URL | 用 于 指定 请 求 地 址 ， 可 以 使 用 绝对 地 址 或 者 相对 地 址 ， 并 且 可 以 传递 查询 字符 串 
asyncFla 为 可 选 参数 ， 用 于 指定 请 求 方式 ， 异 步 请 求 为 tue， 同 步 请 求 为 false， 默 认 情 况 下 为 true 


userName 为 可 选 参 数 ， 用 于 指定 请 求 用 户 名 ， 没 有 时 可 省 略 


例如 ， 设 置 异步 请 求 目标 为 deal.html， 请 求 方法 为 GET， 请 求 方式 为 异步 的 代码 如 下 : 
http_request.open("GET","deal.html",true); // 设 置 异步 请 求 ， 请 求 方法 为 GET 


2. 向 服务 器 发 送 请 求 的 方法 

send0) 方 法 用 于 向 服务 器 发 送 请 求 。 如 果 请 求 声明 为 异步 ， 该 方法 将 立即 返回 ， 否 则 将 等 到 接收 到 
响应 为 止 。 

语法 如 下 : 

send(content) 

参数 content 用 于 指定 发 送 的 数据 ， 可 以 是 DOM 对 象 的 实例 、 输 入 流 或 字符 串 。 如 果 没 有 参数 需 
要 传递 可 以 设置 为 null。 

例如 ， 向 服务 器 发 送 一 个 不 包含 任何 参数 的 请 求 ， 可 以 使 用 下 面 的 代码 : 

http_request.send(null); /向 服务 器 发 送 一 个 不 包含 任何 参数 的 请 求 


3. 设置 请 求 的 HTTP 头 的 方法 

setRequestHeader() 方 法 用 于 为 请 求 的 HTTP 头 设置 值 。 
语法 如 下 : 

setRequestHeader("header", "value") 

参数 说 明 。 

回 ”header: 用 于 指定 HITP 头 。 

回 value: 用 于 为 指定 的 HTTP 头 设置 值 。 


SS 多 四 


setRequestHeader() 方 法 必须 在 调用 open() 方 法 之 后 才能 调用 。 


例如 ， 在 发 送 POST 请 求 时 ， 需 要 设置 Content-Type 请 求 头 的 值 为 application/x-www-form- 
urlencoded， 这 时 就 可 以 通过 setRequestHeader() 方 法 进行 设置 ， 具 体 代 码 如 下 : 

/设置 Content-Type 请 求 头 的 值 

http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
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4. 停止 或 放弃 当前 异步 请 求 的 方法 

abort() 方 法 用 于 停止 或 放弃 当前 异步 请 求 。 

语法 如 下 : 

abort() 

例如 ， 要 停止 当前 异步 请 求 可 以 使 用 下 面 的 语句 : 

http_request.abort(); /停止 当前 异步 请 求 


5. 返回 HTTP 头 信息 的 方法 


XMLHttpRequest 对 象 提供 了 两 种 返回 HTTP 头 信息 的 方法 ， 分 别 是 getResponseHeaderO 和 
getAlIResponseHeaders() 方 法 。 下 面 分 别 进行 介绍 。 

回 getResponseHeader( 方 法 

getResponseHeader() 方 法 用 于 以 字符 串 形式 返回 指定 的 HTTP 头 信息 。 

语法 如 下 : 


getResponseHeader("headerLabel") 


参数 headerLabel 用 于 指定 HTTP 头 ， 包 括 Server、Content-Type 和 Date 等 。 


N/m 


getResponseHeader() 方 法 必须 在 调用 send0 方 法 之 后 才能 调用 。 


例如 ， 要 获取 HTTP 头 Content-Type 的 值 ， 可 以 使 用 以 下 代码 : 


http_request.getResponseHeader("Content-Type"); /获取 HTTP 头 Content-Type 的 值 
如 果 请 求 的 是 HTML 文件 ， 上 面 的 代码 将 获取 到 以 下 内 容 : 
text/html 


加 ”getAllResponseHeaders0 方 法 
getAllResponseHeaders() 方 法 用 于 以 字符 串 形式 返回 完整 的 HTTP 头 信息 。 
语法 如 下 : 


getAllResponseHeaders() 


NA 


getAllIResponseHeaders() 方 法 必须 在 调用 send() 方 法 之 后 才能 调用 。 


例如 , 应 用 下 面 的 代码 调用 getAlIResponseHeaders() 方 法 , 将 弹出 如 图 15.5 所 示 的 对 话 框 显 示 完 整 
的 HITP 头 信息 。 


alert(http_request.getAllResponseHeaders()); /输出 完整 的 HTTP 头 信息 


码 如 下 : 
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图 15.5 获取 的 完整 HITP 头 信息 


【 例 15.01】 本 实例 将 通过 XMLHttpRequest 对 象 读 取 HTML 文件 ， 并 输出 读 取 结 果 。 关 键 代 


01 
02 
03 


(实例 位 置 : 资源 包 \ 源 码 \15\15.01 ) 


<script type="text/javascript"> 
var xmlHttp; /定义 XMLHttpRequest 对 象 
function createXmlHttpRequestObject(){ 
// 如 果 在 IE 浏览 器 下 运行 
if(window.ActiveXObject}{ 
try{ 
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); 
}catch(eX{ 
xmlHttp=false; 
} 
}else{ 
// 如 果 在 Mozilla 或 其 他 浏览 器 下 运行 
try{ 
xmlHttp=new XMLHttpRequest(); 
}catch(eX{ 
xmlHttp=false; 
} 


if 
// 返 回 创建 的 对 象 或 显示 错误 信息 
if(IxmlHttp) 
alert(" 返 回 创建 的 对 象 或 显示 错误 信息 "); 
else 
return xmlHttp; 
} 
function ReqHtml(){ 
createXmlHttpRequestObject(); ll 调用 函数 创建 XMLHttpRequest 对 象 
xmlHttp.onreadystatechange=StatHandler; /指定 回调 函数 
xmlHttp.open("GET","text.html",true); // 调 用 text.html 文件 
xmlHttp.send(null); 
} 
function StatHandler(}{ 
if(xmlHttp.readyState==4 && xmlHttp.status==200){ ”// 如 果 请 求 已 完成 并 请 求 成 功 
/获取 服务 器 返回 的 数据 
document.getElementByld("webpage").innerHTML=xmlHttp.responseText; 
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35 } 

36 } 

37 </script> 

38 <body> 

39 “<!- 创 建 超 链接 --> 

40 ”<a href="#" onclick="ReqHtml();"> 通 过 XMLHttpRequest 对 象 请 求 HTML 文件 </a> 
41 ”<!- 通 过 div 标签 输出 请 求 内 容 --> 

42 <div id="webpage"></div> 


运行 本 实例 ， 单 击 “ 通 过 XMLHttpRequest 对 象 请 求 HTML 文件 ” 超 链接 ， 将 输出 如 图 15.6 所 示 


| neomocanosaaoymndenm= Pp- c|| 瑟 二 axvuhapReque. x mx 
文件 昌 ” 洲 强 ”可 看 VW) 收藏 夫 和 A) 工具 四。 大 有 动 ) 
通过 XMLHttpRequest 对 象 请 求 HTML 文 件 


商品 专题 新 品 上 架 特价 商品 “购物 推 车 ”账户 管理 


15.6 ”通过 XMLHttpRequest 对 象 读 取 HTML 文件 


全 0 注 意 
运行 该 实例 需要 搭建 Web 服务 器 ， 推 荐 使 用 Apache 服务 器 。 安 装 服务 器 后 ， 将 该 实例 文件 夹 
“01” 存 储 在 网 站 根 目录 (通常 为 安装 目录 下 的 htdocs 文件 夹 ) 下 ， 在 地 址 栏 中 输入 “http://localhost/ 
01/index.html”， 然 后 按 Enter 键 运行 。 


4 
SO 说明 
: 通过 XMLHttpRequest 对 象 不 但 可 以 读 取 HTML 文件 ， 还 可 以 读 取 文本 文件 、XML 文件 ， 其 
实现 交互 的 方法 与 读 取 HTML 文件 类 似 。 


15.4 实 战 


15.4.1 检测 用 户 名 是 否 被 占用 


在 用 户 注册 表单 中 , 使 用 Ajax 技术 检测 用 户 名 是 否 被 占用 , 运行 结果 如 图 15.7 所 示 。( 实例 位 置 : 
资源 包 \ 源 码 \15\ 实 战 \01 ) 
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图 15.7 检测 用 户 名 是 否 被 占用 


15.4.2 读 取 XML 文件 


通过 XMLHttpRequest 对 象 读 取 XML 文件 ， 并 输出 读 取 结果 ， 运 行 结果 如 图 15.8 所 示 。( 实例 位 
置 : 资源 包 \ 源 码 \15\ 实 战 \02 ) 


图 15.8 通过 XMLHttpRequest 对 象 读 取 XML 文件 
15.3. 小 结 


本 章 主 要 从 Ajax 基础 到 XMLHttpRequest 对 象 等 方面 对 Ajax 技术 进行 了 介绍 , 并 结合 了 常用 的 实 
例 进行 讲解 。 通 过 本 章 的 学 习 ， 可 以 对 Ajax 技术 有 个 全 面 了 解 ， 并 能 够 掌握 Ajax 开发 程序 的 具体 过 
程 ， 做 到 融会 贯通 。 


人 


jQuery 基础 
( 哎 视 频 讲解 1 小 时 1 分 钟 ) 


随 着 互联 网 的 快速 发 展 ， 涌 现 了 一 批 优秀 的 JavaScript 脚本 库 ， 例 如 ExtjJs、 
prototype、Dojo 等 ， 这 些 脚 本 库 将 开发 人 员 从 复杂 的 JavaScript 中 解脱 出 来 ， 将 
开发 的 重点 从 实现 细节 转向 功能 需求 上 ， 提 高 了 项 目 开发 的 效率 。 其 中 ，jQuery 
是 继 prototype 之 后 又 一 个 优秀 的 JavaScript 和 脚本 库 。 本 章 将 对 jQuery 的 下 载 使 用 
以 及 jQuery 选择 器 进行 介绍 。 

通过 学 习 本 章 ， 读 者 主要 事 担 以 下 内 容 : 


| 


使 用 jQuery 的 优点 
jQuery 的 下 载 和 配置 方法 
基本 选择 路 的 使 用 
层级 选择 路 的 使 用 

过 小 选择 路 的 使 用 
属性 选择 路 的 使 用 
表单 选择 路 的 使 用 
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16.1 jQuery 概述 


jQuery 是 一 套 简洁 、 快 速 、 灵 活 的 JavaScript 脚本 库 ， 它 是 由 John Resig 于 2006 年 创建 的 ， 它 帮 
助 开发 人 员 简化 了 JavaScript 代码 。JavaScript 脚本 库 类 似 于 Java 的 类 库 ， 我 们 将 一 些 工 具 方法 或 对 象 
方法 封装 在 类 库 中 ， 方 便 用 户 使 用 。 因 为 简便 易 用 ，jQuery 已 被 大 量 的 开发 人 员 推崇 使 用 。 
$b 注意 

jQuery 是 脚本 库 ， 而 不 是 框架 。“ 库 ”不 等 于 “框架 ”， 例 如 “System 程序 集 ” 是 类 库 ， 而 
Spring MVC 是 框架 。 RS 

脚本 库 能 够 帮助 我 们 完成 编码 逻辑 ， 实 现 业务 功能 。 使 用 jQuery 极 大 地 提高 了 编写 JavaScript 代 
码 的 效率 ， 让 写 出 来 的 代码 更 加 简洁 、 健 壮 。 同 时 网 络 上 丰富 的 jQuery 插件 也 让 开发 人 员 的 工作 变 得 
更 为 轻松 ， 让 项 目的 开发 效率 有 了 质 的 提升 。jQuery 不 仅 适合 于 网 页 设计 师 、 开 发 者 以 及 编程 爱好 者 ， 
同样 适合 用 于 商业 开发 ， 可 以 说 jQuery 适合 任何 应 用 JavaScript 的 地 方 。 

jQuery 是 一 个 简洁 快速 的 JavaScript 脚本 库 , 它 能 让 开发 人 员 在 网 页 上 简单 地 操作 文档 、 处 理事 件 、 
运行 动画 效果 或 者 添加 异步 交互 。 jQuery 的 设计 改变 开发 人 员 编 写 JavaScript 代码 的 方式 , 提高 编程 效 
率 。jQuery 主要 特点 如 下 。 
代码 精致 小 巧 。 
强大 的 功能 函数 。 

跨 浏览 器 。 
链 式 的 语法 风格 。 
插件 丰富 。 


加 
回 
回 
回 
回 


16.2 jQuery 下 载 与 配置 


要 在 网 站 中 应 用 jQuery 库 ， 需 要 下 载 并 配置 ， 下 面 将 介绍 如 何 下 载 与 配置 jQuery。 
1. 下 载 jQuery 
jQuery 是 一 个 开源 的 脚本 库 ， 可 以 从 官方 网 站 (http-/iquerycom) 下 载 。 下 面 介绍 具体 的 下 载 步骤 。 
(1) 在 浏览 器 的 地 址 栏 中 输入 “http://jquery.com/download”， 并 按 下 Enter 键 ， 将 进入 jQuery 的 
下 载 页 面 ， 如 图 16.1 所 示 。 
(2) 在 下 载 页 面 中 ， 可 以 下 载 最 新 版 本 的 jQuery 库 ， 目 前 ，jQuery 的 最 新 版 本 是 jQuery 3.3.1。 
单 击 图 16.1 中 的 Download the compressed, production jQuery 3.3.1 超 链接 , 将 弹出 如 图 16.2 所 示 的 下 载 
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Download AplDocumentation Blos Plusins BrowserSupport 


Downloading jQuery 


Compressed and uncompressed copies of jQuery files are available. The uncompressed flle i 

compressed file saves bandwidth and improves performance in production. You can also a 
with a compressed file. The map file is not required for users to run jQuery, it just improves thd 
1.11.0/2.1.0 the W/W So0reenappiielR commentis not included in the compressed file 


To locally download these files, right-click the link and select "Save as.." from the menu. 


jQuery 
For help when upgrading jQuery, please see the Upgrade guide most relevant to your version. 
plugin 


Download the compressed. production jQuery 3.31 


Download the uncompressed, development jQuery 3.31 


Download the map file for jQuery 3 3.1 
图 16.1 jQuery 的 下 载 页 面 


要 打开 开 保 站 来 S codejquery.com 的 jquery-3.3Lminjs 可 7 TO) (| 全 FG |™ WMO | x 


图 16.2 下 载 jquery-3.3.1.min.js 


(3) 单 击 “ 保 存 ” 按 钮 ， 将 jQuery 库 下 载 到 本 地 计算 机 上 。 下 载 后 的 文件 名 为 jquery-3.3.1.min.js。 

此 时 下 载 的 文件 为 压缩 后 的 版 本 〈 主 要 用 于 项 目 与 产品 )。 如 果 想 下 载 完整 不 压缩 的 版 本 ， 可 以 在 
图 16.1 中 单 击 Download the uncompressed, development jQuery 3.3.1 超 链接 ， 然 后 单 击 “ 保 存 ” 按 钮 进 
行 下 载 。 下 载 后 的 文件 名 为 jquery-3.3.1.js。 


pa 四 
(1) 在 项 目 中 通常 使 用 压缩 后 的 文件 ， 即 jquery-3.3.1.min js。 
(2 ) 由 于 新 版 本 jQuery 和 正 浏览 器 存在 兼容 性 问题 ， 因 此 ， 本 书 中 的 jQuery 程序 是 在 IE 11 
;浏览 器 下 运行 的 。 


2. 配置 jQuery 


将 jQuery 库 下 载 到 本 地 计算 机 后 ， 还 需要 在 项 目 中 配置 jQuery 库 。 将 下 载 后 的 jquery-3.3.1.min.js 
文件 放置 到 项 目的 指定 文件 夹 中 , 通常 放置 在 JS 文件 夹 中 , 然后 在 需要 应 用 jQuery 的 页 面 中 使 用 下 面 
的 语句 ， 将 其 引用 到 文件 中 。 


<script type="text/javascript" src="JS/jquery-3.3.1.min.js"></script> 
引用 jQuery 的 <script> 标 签 ， 必 须 放 在 所 有 的 自 定义 脚本 文件 的 <scrip 仿 之前， 否则 在 自 定义 的 
| 脚本 代码 中 应 用 不 到 jQuery 脚本 库 。 
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16.3 jQuery 选择 器 


开发 人 员 在 实现 页 面 的 业务 逻辑 时 ， 必 须 操作 相应 的 对 象 或 是 数组 ， 这 时 就 需要 利用 选择 器 选择 
匹配 的 元 素 ， 以 便 进行 下 一 步 的 操作 ， 所 以 选择 器 是 一 切 页 面 操作 的 基础 ， 没 有 它 开发 人 员 将 无 所 适 
从 。 在 传统 的 JavaScript 中 ， 只 能 根据 元 素 的 id 和 TagName 来 获取 相应 的 DOM 元 素 。 但 是 在 jQuery 
中 却 提供 了 许多 功能 强大 的 选择 器 帮助 开发 人 员 获 取 页 面 上 的 DOM 元 素 ， 获 取 到 的 每 个 对 象 都 将 以 
jQuery 包装 集 的 形式 返回 。 本 节 将 介绍 如 何 应 用 jQuery 的 选择 器 选择 匹配 的 元 素 。 


16.3.1 jQuery 的 工厂 函数 


在 介绍 jQuery 的 选择 器 之 前 ， 先 来 介绍 一 下 jQuery 的 工厂 函数 “$”。 在 jQuery 中 ， 无 论 使 用 哪 
种 类 型 的 选择 器 都 需要 从 一 个 “$” 符 号 和 一 对 “0 ”开始 。 在 “QO” 中 通常 使 用 字符 串 参数 ， 参 数 中 
可 以 包含 任何 CSS 选择 符 表达 式 。 下 面 介绍 几 种 比较 常见 的 用 法 。 

回 “在 参数 中 使 用 标记 名 

$("div"): 用 于 获取 文档 中 全 部 的 <div>。 

回 “在 参数 中 使 用 ID 

$("#username"): 用 于 获取 文档 中 ID 属性 值 为 username 的 一 个 元 素 。 

回 “在 参数 中 使 用 CSS 类 名 

$(".btn_grey"): 用 于 获取 文档 中 使 用 CSS 类 名 为 btn_grey 的 所 有 元 素 。 


16.3.2 ”基本 选择 器 


基本 选择 器 在 实际 应 用 中 比较 广泛 ， 建 议 重 点 掌握 jQuery 的 基本 选择 器 ， 它 是 其 他 类 型 选择 器 的 
基础 ， 是 jQuery 选择 器 中 最 为 重要 的 部 分 。jQuery 基本 选择 器 包括 ID 选择 器 、 元 素 选择 器 、 类 名 选 
择 器 、 复 合 选择 器 和 通配符 选择 器 。 下 面 进行 详细 介绍 。 

1. ID 选择 器 (#d) 

ID 选择 器 (##d) 顾名思义 就 是 利用 DOM 元 素 的 id 属性 值 来 筛选 匹配 的 元 素 ， 并 以 jQuery 包装 
集 的 形式 返回 给 对 象 。 这 就 像 一 个 学 校 中 每 个 学 生 都 有 自己 的 学 号 一 样 ， 学 生 的 姓名 是 可 以 重复 的 但 
是 学 号 却 是 不 可 以 的 ， 根 据 学 生 的 学 号 就 可 以 获取 指定 学 生 的 信息 。 

ID 选择 器 的 使 用 方法 如 下 : 

$("#id"); 

其 中 ,id 为 要 查询 元 素 的 ID 属性 值 .例如 ,要 查询 ID 属性 值 为 user 的 元 素 ,可 以 使 用 下 面 的 jQuery 
代码 : 


$("#user"); 
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人 5 注意 
如 果 页 面 中 出 现 了 两 个 相同 的 id 属 性 值 ,程序 运行 时 页 面 会 报 出 JavaScript 运 行 错 误 的 对 话 框 ， 
所 以 在 页 面 中 设置 id 属性 值 时 要 确保 该 属性 值 在 页 面 中 是 唯一 的 


【 例 16.01】 本 实例 将 在 页 面 中 添加 一 个 ID 属性 值 为 testInput 的 文本 框 和 一 个 按钮 ， 通过 单 击 
按钮 来 获取 在 文本 框 中 输入 的 值 。 关 键 步骤 如 下 : ( 实例 位 置 : 资源 包 \ 源 码 \16\16.01 ) 
(1) 创建 ndex.html 文件 ， 在 该 文件 的 <head> 标 记 中 应 用 下 面 的 语句 引入 jQuery 库 。 


<script type="text/javascript" src="JS/jquery-3.2.1.min.js"></script> 
(2) 在 页 面 的 <body> 标 记 中 ， 添 加 一 个 人 D 属性 值 为 testInput 的 文本 框 和 一 个 按钮 ， 代 码 如 下 : 


01 <input type="text" id="testinput" name="test" value=""/> 
02 ”<input type="button" value=" 输 入 的 值 为 "/> 
(3) 在 引入 jQuery 库 的 代码 下 方 编写 jQuery 代码 ， 实 现 单 击 按 钮 来 获取 在 文本 框 中 输入 的 值 ， 
有 具体 代码 如 下 : 


01 <scripttype="text/javascript"> 
02 S$(document).ready(function(X{ 


03 S$("inputltype='button']").click(function(X{ /为 按钮 绑 定单 击 事件 
04 var inputValue = $("#testlnput").val(); // 获 取 文 本 框 的 值 

05 alert(inputValue); // 输 出 文本 框 的 值 

06 »; 

07 入 

08 </script> 


在 上 面 的 代码 中 ， 第 3 行使 用 了 jQuery 中 的 属性 选择 器 匹配 文档 中 的 按钮 ， 并 且 为 按钮 绑 定单 击 
事件 。 关 于 属性 选择 器 的 详细 介绍 请 参见 16.3.5 节 ， 关 于 按钮 绑 定单 击 事件 ， 请 参见 18.3 节 。 


/. 
SO 说明 
ID 选择 器 是 以 “##id” 的 形式 获取 对 象 的 ， 在 这 段 代 码 中 用 $("#testInput") 获 取 了 一 个 id 属性 值 
为 testInput 的 jQuery 包装 集 ， 然 后 调用 包装 集 的 val0 方 法 取得 文本 框 的 值 。 


运行 本 实例 ,在 文本 框 中 输入 “一 场 说 走 就 走 的 旅行 ” 如 图 16.3 所 示 , 单 击 “ 输 入 的 值 为 ” 按钮， 
将 弹出 对 话 框 显示 输入 的 文字 ， 如 图 16.4 所 示 。 


全 nas 


(ec ie\SL\15\o1\inc DP = © 
EEE EE 


图 16.3 在 文本 框 中 输入 文字 图 16.4 弹出 的 对 话 框 
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jQuery 中 的 ID 选择 器 相当 于 传统 的 JavaScript 中 的 document.getElementById0 方 法 ，jQuery 用 更 
简洁 的 代码 实现 了 相同 的 功能 。 虽 然 两 者 都 获取 了 指定 的 元 素 对 象 ， 但 是 两 者 调用 的 方法 是 不 同 的 。 
利用 JavaScript 获取 的 对 象 只 能 调用 DOM 方法 , 而 jQuery 获取 的 对 象 既 可 以 使 用 jQuery 封装 的 方法 ， 
又 可 以 使 用 DOM 方法 。 但 是 jQuery 在 调用 DOM 方法 时 需要 进行 特殊 的 处 理 ， 也 就 是 需要 将 jQuery 
对 象 转换 为 DOM 对 象 。 

2. 元 素 选 择 器 (element) 


元 素 选 择 器 是 根据 元 素 名 称 匹配 相应 的 元 素 。 通 俗 地 讲 ， 元 素 选 择 器 指向 的 是 DOM 元 素 的 标记 
名 ， 也 就 是 说 元 素 选择 器 是 根据 元 素 的 标记 名 选择 的 。 可 以 把 元 素 的 标记 名 理解 成 学 生 的 姓名 ， 在 一 
个 学 校 中 可 能 有 多 个 姓名 为 “ 刘 伟 ” 的 学 生 ， 但 是 姓名 为 “吴语 ”的 学 生 也 许 只 有 一 个 ， 所 以 通过 元 
素 选择 器 匹配 到 的 元 素 可 能 有 多 个 ， 也 可 能 是 一 个 。 多 数 情 况 下 ， 元 素 选 择 器 匹配 的 是 一 组 元 素 。 

元 素 选择 器 的 使 用 方法 如 下 : 

S$("element"); 

其 中 ，element 为 要 查询 元 素 的 标记 名 。 例如 ， 要 查询 全 部 div 元 素 , 可 以 使 用 下 面 的 jQuery 代码 : 

$("div"); 

【 例 16.02】 本 实例 将 在 页 面 中 添加 两 个 <div> 标 记 和 一 个 按钮 ， 通 过 单 击 按钮 来 获取 这 两 个 
<div>， 并 修改 它们 的 内 容 。 关 键 步骤 如 下 : ( 实例 位 置 : 资源 包 \ 源 码 \16\16.02 ) 

(1) 创建 ndex.html 文件 ， 在 该 文件 的 <head> 标 记 中 应 用 下 面 的 语句 引入 jQuery 库 。 

<script type="text/javascript" src="JS/jquery-3.2.1.min.js"></script> 

(2) 在 页 面 的 <body> 标 记 中 ， 添 加 两 个 <div> 标 记 和 一 个 按钮 ， 代 码 如 下 : 

01 <div> 

02 ”<img src="images/strawberry.jpg"> 这 里 种 植 了 一 棵 草莓 

03 </div> 

04 <div> 

05 <img src="images/fish.jpg"/> 这 里 养殖 了 一 条 鱼 

06 </div> 

07 ”<input type="button" value=" 若 干 年 后 " /> 


(3) 在 引入 jQuery 库 的 代码 下 方 编写 jQuery 代码 ， 实 现 单 击 按钮 来 获取 全 部 <div> 元 素 ， 并 修改 
它们 的 内 容 ， 具 体 代码 如 下 : 


01 <scripttype="text/javascript"> 
02 S$(document).ready(function(X{ 


03 S$("input[type='button']").click(function(X{ /为 按钮 绑 定单 击 事件 
04 /获取 第 一 个 div 元 素 

05 S$("div").eq(0).html("<img src='images/strawberry1.jpg/> 这 里 长 出 了 一 片 草莓 "); 
06 /获取 第 二 个 div 元 素 

07 $("div").get(1).innerHTML="<img src='images/fish1.jpg/> 这 里 的 鱼 没 有 了 "; 

08 »; 

09 »); 

10 </script> 
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在 上 面 的 代码 中 ， 使 用 元 素 选择 器 获取 了 一 组 div 元 素 的 jQuery 包装 集 ， 它 是 一 组 Object 对 象 ， 
存储 方式 为 [Object Objectlj， 但 是 这 种 方式 并 不 能 显示 出 单独 元 素 的 文本 信息 ， 需 要 通过 索引 器 来 确定 
要 选取 哪个 div 元 素 , 在 这 里 分 别 使 用 了 两 个 不 同 的 索引 器 eq0 和 get0。 这 里 的 索引 器 类 似 于 房间 的 门 
牌号 ， 所 不 同 的 是 ， 门 牌号 是 从 1 开始 计数 的 ， 而 索引 器 是 从 0 开始 计数 的 。 

Bee 闻 
在 本 实例 中 使 用 了 两 种 方法 设置 元 素 的 文本 内 容 ，html0 方 法 是 jQuery 的 方法 ， 对 innerHTML 
属性 赋值 的 方法 是 DOM 对象 的 方法 。 本 实例 还 用 了 S$(document).ready() 方 法 ， 当 页 面 元 素 载 入 完成 
， 时 就 会 自动 执行 程序 ， 自 动 为 按钮 绑 定 单 击 事件 。 


注意 
eq0 方 法 返回 的 是 一 个 jQuery 包装 集 ， 所 以 它 只 能 调用 jQuery 的 方法 ， 而 get0 方 法 返回 的 是 
一 个 DOM 对 象 ， 所 以 它 只 能 用 DOM 对 象 的 方法 。eq() 方 法 与 get() 方 法 默认 都 是 从 0 开始 计数 。 


运行 本 实例 ， 首 先 显示 如 图 16.5 所 示 的 页 面 ， 单 击 “ 若 干 年 后 ”按钮 ， 将 显示 如 图 16.6 所 示 的 页 面 。 


万 ] EACode\sSW\15\02inc DP- 0 | 
坊 缠 (E) 重 看 V) 收 藉 关 A) 工具 中” | 文件 (日 注 坟 (E) 重 看 WV 收 大 闪 (A) 


图 ... 国 ,. . 


4 
这 里 着 了 一 条 


若干 年 后 


图 16.5 单 击 按钮 前 图 16.6 单 击 按钮 后 


3. 类 名 选择 器 (.class) 


类 名 选择 器 是 通过 元 素 拥 有 的 CSS 类 的 名 称 查 找 匹配 的 DOM 元 素 。 在 一 个 页 面 中 ， 一 个 元 素 可 
以 有 多 个 CSS 类 , 一 个 CSS 类 又 可 以 匹配 多 个 元 素 ， 如 果 在 元 素 中 有 一 个 匹配 的 类 的 名 称 就 可 以 被 类 


名 选择 器 选取 到 。 

类 名 选择 器 可 以 这 样 理解 ， 在 大 学 的 时 候 大 部 分 人 都 选 过 课 ， 可 以 把 CSS 类 名 理解 为 课程 名 称 ， 
元 素 理解 成 学 生 ， 学 生 可 以 选择 多 门 课程 ， 而 一 门 课程 又 可 以 被 多 名 学 生 所 选择 。CSS 类 与 元 素 的 关 
系 既 可 以 是 多 对 多 的 关系 ， 也 可 以 是 一 对 多 或 多 对 一 的 关系 。 

类 名 选择 器 的 使 用 方法 如 下 : 

$(".class"); 

其 中 ，class 为 要 查询 元 素 所 用 的 CSS 类 名 。 例 如 ， 要 查询 使 用 CSS 类 名 为 word_orange 的 元 素 ， 
可 以 使 用 下 面 的 jQuery 代码 : 

$(".word_orange"); 
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【 例 16.03】 在 页 面 中 , 首先 添加 两 个 <div> 标 记 , 并 为 其 中 的 一 个 设置 CSS 类 , 然后 通过 jQuery 
的 类 名 选择 器 选取 设置 CSS 类 的 <div> 标 记 ， 并 设置 其 CSS 样式 。 关 键 步骤 如 下 : ( 实例 位 置 : 资源 包 \ 
源码 \16\16.03 ) 
(1) 创建 mdex.html 文件 ， 在 该 文件 的 <head> 标 记 中 应 用 下 面 的 语句 引入 jQuery 库 。 
<script type="text/javascript" src="JS/jquery-3.2.1.min.js"></script> 
(2) 在 页 面 的 <body> 标 记 中 , 添加 两 个 <div> 标 记 , 一 个 使 用 CSS 类 myClass, 另 一 个 不 设置 CSS 
类 ， 代 码 如 下 : 


01 ”<div class="myClass"> 注 意 观 察 我 的 样式 </div> 
02 ”<div> 我 的 样式 是 默认 的 </div> 


DV 


这 里 添加 了 两 个 <div> 标 记 是 为 了 对 比 效果 ,默认 的 背景 颜色 都 是 蓝 色 的 , 文字 颜色 都 是 黑色 的 。 


(3) 为 页 面 中 的 两 个 div 元 素 添加 CSS 样式 ， 代 码 如 下 : 
01 <styletype="text/css"> 


02 div{ 

03 border:1px solid #003a75; 
04 background-color:#cef; 
05 margin:5px; 

06 height:35px; 

07 width:75px; 

08 float:left; 

09 font-size:12px; 

10 padding:5px; 

11 } 

12 </style> 


(4) 在 引入 jQuery 库 的 代码 下 方 编写 jQuery 代码 ， 实 现 按 CSS 类 名 选取 DOM 元 素 ， 并 更 改 其 
样式 (这 里 更 改 了 背景 颜色 和 文字 颜色 )， 具 体 代码 如 下 : 


01 <scripttype="text/javascript"> 
02 $(document).ready(function() { 


03 var myClass = $(".myClass"); /选取 DOM 元 素 

04 myClass.css("background-color","#C50210"); /为 选取 的 DOM 元 素 设置 背景 颜色 
05 myClass.css("color","#FFF"); /为 选取 的 DOM 元 素 设置 文字 颜色 
06 » 

07 </script> 


在 上 面 的 代码 中 ， 只 为 其 中 的 一 个 <div> 标 记 设 置 了 CSS 类 名 称 ， 但 是 由 于 程序 中 并 没有 名 称 为 
myClass 的 CSS 类 ， 所 以 这 个 类 是 没有 任何 属性 的 。 类 名 选择 器 将 返回 一 个 名 为 myClass 的 jQuery 包 
装 集 ， 利 用 css() 方 法 可 以 为 对 应 的 div 元 素 设 定 CSS 属性 值 ， 这 里 将 元 素 的 背景 颜色 设置 为 深 红 色 ， 
文字 颜色 设置 为 白色 。 
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6 注意 
类 名 选择 器 也 可 能 会 获取 一 组 jQuery 包装 集 ， 因 为 多 个 元 素 可 以 拥有 同一 个 CSS 样式 。 


运行 本 实例 ， 将 显示 如 图 16.7 所 示 的 页 面 。 其 中 ， 左 


边 的 DIV 为 更 改 样式 后 的 效果 , 右边 的 DIV 为 默认 的 样式 。 【< 加 加 EWodds oN pO 


文件 (站 六 和 日。 重 看 M) 收 硬 夫 (和 工具。 帮助 (H) 


由 于 使 用 了 $(document).ready0 方 法 ， 所 以 选择 元 素 并 更 改 
样式 在 DOM 元 素 加 载 就 绪 时 就 已 经 自动 执行 完毕 。 "En 
4. 复合 选择 器 (selector1,selector2,.…,selectorN) 


复合 选择 器 将 多 个 选择 器 (可 以 是 ID 选择 器 、 元 素 选 
择 器 或 是 类 名 选择 器 ) 组 合 在 一 起 ， 两 个 选择 器 之 间 以 逗号 “,” 分 隔 ， 只 要 符合 其 中 的 任何 一 个 筛选 
条 件 就 会 被 匹配 ,返回 的 是 一 个 集合 形式 的 jQuery 包装 集 , 利 用 jQuery 索引 器 可 以 取得 集合 中 的 jQuery 
对 象 。 


图 16.7 通过 类 名 选择 器 选择 元 素 并 更 改 样式 


0 注 总 
多 种 匹配 条 件 的 选择 器 并 不 是 匹配 同时 满足 这 几 个 选择 器 的 匹配 条 件 的 元 素 , 而 是 将 每 个 选择 
器 匹配 的 元 素 合并 后 一 起 返回 。 


复合 选择 器 的 使 用 方法 如 下 : 

$(" selector1,selector2,...,selectorN"); 

回 selectorl: 为 一 个 有 效 的 选择 器 ， 可 以 是 ID 选择 器 、 元 素 选择 器 或 是 类 名 选择 器 等 。 

回 selector2: 为 另 一 个 有 效 的 选择 器 ， 可 以 是 IJD 选择 器 、 元 素 选 择 器 或 是 类 名 选择 器 等 。 

回 selectorN: (可 选择 ) 为 第 N 个 有 效 的 选择 器 ， 可 以 是 ID 选择 器 、 元 素 选 择 器 或 是 类 名 选择 

例如 ， 要 查询 文档 中 全 部 的 <span> 标 记 和 使 用 CSS 类 myClass 的 <div> 标 记 ， 可 以 使 用 下 面 的 jQuery 
代码 : 

S$("span,div.myClass"); 

【 例 16.04】 在 页 面 中 添加 3 种 不 同 元 素 并 统一 设置 样式 。 使 用 复合 选择 器 筛选 <div> 元 素 和 id 
属性 值 为 span 的 元 素 ， 并 为 它们 添加 新 的 样式 。 关 键 步骤 如 下 : ( 实例 位 置 : 资源 包 \ 源 码 \16\16.04 ) 

(1) 创建 index.html 文件 ， 在 该 文件 的 <head> 标 记 中 应 用 下 面 的 语句 引入 jQuery 库 。 


<script type="text/javascript" src="JS/jquery-3.2.1.min.js"></script> 


(2) 在 页 面 的 <body> 标 记 中 ， 添 加 一 个 <p> 标 记 、 一 个 <div> 标 记 、 一 个 ID 为 span 的 <span> 标 记 
和 一 个 按钮 ， 并 为 除 按钮 以 外 的 3 个 标记 指定 CSS 类 名 ， 代 码 如 下 : 


01 ”<p class="default">p 元 素 </p> 
02 <div class="default">div 元 素 </div> 
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03 ”<span class="default" id="span">ID 为 span 的 元 素 </span> 
04 ”<input type="button" value=" 为 div 元 素 和 1D 为 span 的 元 素 换 肤 " /> 


(3) 编写 CSS 代码 ， 为 页 面 中 的 元 素 定义 一 个 默认 样式 和 一 个 新 的 样式 ， 代 码 如 下 : 
01 <style type= "text/css"> 


02 .default{ 

03 border:1px solid #003a75; 
04 background-color:yellow; 
05 margin:5px; 

06 width:90px; 

07 float:left; 

08 font-size:12px; 

09 padding:5px; 

140 0 

lel .change{ 

12 background-color:#C50210; 
13 color:#FFF:; 

14 } 

15 </style> 


(4) 在 引入 jQuery 库 的 代码 下 方 编写 jQuery 代码 , 实现 单 击 按钮 来 获取 全 部 <div> 元 素 和 id 属性 
值 为 span 的 元 素 ， 并 为 它们 添加 新 的 样式 ， 具 体 代 码 如 下 : 


01 <scripttype="text/javascript"> 
02 $(document).ready(function() { 


03 S$("inputftype=button]").click(function(){ // 绑 定 按钮 的 单 击 事件 
04 $("div,#span").addClass("change"); /添加 所 使 用 的 CSS 类 
05 六 

06 }); 

07 </script> 


运行 本 实例 ， 将 显示 如 图 16.8 所 示 的 页 面 ， 单 击 “ 为 div 元 素 和 ID 为 span 的 元 素 换 肤 ”按钮 ， 
将 为 div 元素 和 了 D 为 span 的 元 素 换 肤 ， 如 图 16.9 所 示 。 


EACode\S\1i5\04inc PD © 
文件 日 ” 妨 强 (E) 吾 看 VV) 收藏 夫 (A) 工具 中 帮助 (中 ) 文件 (有) ”六 强 (E) 音 看 (V) ”收藏 突 (A) 工具 (T) 帮助 (H) 


为 dv 元 素 和 ID 为 span 的 元 素 换 肤 为 dv 元 素 和 ID 为 span 的 元 素 换 肤 


图 16.8 单 击 按钮 前 图 16.9 单 击 按钮 后 
5. 通配符 选择 器 (*) 


所 谓 的 通配符 ， 就 是 指 符号 “*”， 它 代表 着 页 面 上 的 每 一 个 元 素 ， 也 就 是 说 如 果 使 用 $("*") 将 取 
得 页 面 上 所 有 的 DOM 元 素 集合 的 jQuery 包装 集 。 通 配 符 选择 器 比较 好 理解 ， 这 里 就 不 再 给 予 示 例 
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16.3.3 ”层级 选择 器 


所 谓 的 层级 选择 器 ， 就 是 根据 页 面 DOM 元 素 之 间 的 父子 关系 作为 匹配 的 筛选 条 件 。 首 先 来 看 什 
么 是 页 面 上 元 素 的 关系 。 例 如 ， 下 面 的 代码 是 最 为 常用 也 是 最 简单 的 DOM 元 素 结构 。 

01 <html> 

02 <head></head> 

03 <body></body> 

04 </html> 

在 这 段 代码 所 示 的 页 面 结构 中 ，html 元 素 是 页 面 上 其 他 所 有 元 素 的 祖先 元 素 ， 那 么 head 元 素 就 是 
html 元 素 的 子 元 素 , 同时 html 元 素 也 是 head 元 素 的 父 元 素 。 页 面 上 的 head 元 素 与 body 元 素 就 是 同辈 
元 素 。 也 就 是 说 ，html 元 素 是 head 元 素 和 body 元 素 的 “父亲 ”，head 元 素 和 body 元 素 是 html 元 素 的 

“儿子 ” head 元 素 与 body 元 素 是 “兄弟 ”。 具 体 关系 如 图 16.10 所 示 。 


了 元 素 二 子 元 来 
多 元 素 允 元 素 ， 


16.10 ”元素 层级 关系 示意 图 
在 了 解 了 页 面 上 元 素 的 关系 后 ， 再 来 介绍 jQuery 提供 的 层级 选择 器 。jQuery 提供 了 ancestor descendan 
选择 器 、parent > child 选择 器 、prev + next 选择 器 和 prev ~ siblings 选择 器 ， 下 面 进行 详细 介绍 。 
1.ancestor descendant 选择 器 
ancestor descendant 选择 器 中 的 ancestor 代表 祖先 ，descendant 代表 子孙 ， 用 于 在 给 定 的 祖先 元 素 
匹配 所 有 的 后 代 元 素 。ancestor descendant 选择 器 的 使 用 方法 如 下 : 
S$("ancestor descendant"); 
回 ancestor 是 指 任何 有 效 的 选择 器 。 
回 descendant 是 用 以 匹配 元 素 的 选择 器 ， 并 且 它 是 ancestor 所 指定 元 素 的 后 代 元 素 。 
例如 ， 要 匹配 元 素 下 的 全 部 二 元 素 ， 可 以 使 用 下 面 的 jQuery 代码 : 
$("ul i"); 
【 例 16.05】 本 实例 将 通过 jQuery 为 版 权 列表 设置 样式 。 关 键 步 又 如 下 :( 实例 位 置 : 资源 包 \ 
源码 \16\16.05 ) 
(1) 创建 index.html 文件 ， 在 该 文件 的 <head> 标 记 中 应 用 下 面 的 语句 引入 jQuery 库 。 


本 | 


<script type="text/javascript" src="JS/jquery-3.2.1.min.js"></script> 
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(2) 在 页 面 的 <body> 标 记 中 ， 首 先 添 加 一 个 <div> 标 记 ， 并 在 该 <div> 标 记 内 添加 一 个 <ul> 标 记 及 
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其 子 标记 <li>， 然 后 在 <div> 标 记 的 后 面 再 添加 一 个 <ul> 标 记 及 其 子 标记 <li>， 代 码 如 下 : 


<div id="bottom"> 
<ul> 


<li> 技 术 服务 热线 : 400-675-1066 传真 : 0431-84978981 企业 邮箱 : mingrisoft@mingrisoft.com 


</li> 


<li>Copyright &copy; www.mrbccd.com Al Rights Reserved! < 中 > 


</ul> 
</div> 
<ul> 


<li> 技 术 服务 热线 : 400-675-1066 传真 ， 0431-84978981 企业 邮箱 : mingrisoft@mingrisoft.com 


</li> 


<li>Copyright &copy; www.mrbccd.com All Rights Reserved! </li> 


</ul> 


(3) 编写 CSS 样式 ， 通 过 ID 选择 符 设置 <div> 标 记 的 样式 ， 并 且 编写 一 个 类 选择 符 copyright， 


用 于 设置 <div> 标 记 内 的 版 权 列表 的 样式 ， 具 体 代码 如 下 : 


01 
02 
03 
04 
05 
06 
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<style type="text/css"> 
body{ 
margin:Opx; 

} 

#bottom{ 
background-image:url(images/bg_bottom.jpg); 
width:800px; 
height:58px; 
clear: both; 
text-align:center; 
padding-top:10px; 
font-size:12px; 

} 

-copyright{ 
color:#FFFFFF:; 
list-style:none; 
line-height:20px; 

} 

</style> 


”设置 外 边 距 */ 


/设置 背景 % 

/设置 宽度 %/ 

/设置 高 度 %/ 

让 设置 左右 两 侧 无 浮动 内 容 */ 
”设置 文字 居中 对 齐 */ 
”设置 顶 边 距 */ 

/设置 字体 大 小 % 


让 设置 文字 颜色 */ 
让 不 显示 项 目 符号 */ 
/设置 行 高 


(4) 在 引入 jQuery 库 的 代码 下 方 编写 jQuery 代码 ， 匹 配 div 元 素 的 子 元 素 ul， 并 为 其 添加 CSS 
样式 ， 具 体 代码 如 下 : 


01 
02 
03 
04 
05 


256 


<script type="text/javascript"> 

$(document).ready(function(X{ 
S$("div ul").addClass("copyright"); 

入 

</script> 


/为 div 元 素 的 子 元 素 Ul 添加 样式 
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运行 本 实例 ,将 显示 如 图 16.11 所 示 的 效果 ， 其 中 上 面 的 版 权 信 息 是 通过 jQuery 添加 样式 的 效果 ， 
下 面 的 版 权 信息 为 默认 的 效果 。 


【< 癌 回 Ecodevsttl5Nsyndt P - 名 | 夺 ancestor descendant 二 、 x 


文件 旧 。 六 各 (E) 坦 看 fV) 收 宫 夫人 A) 工 县 入 帮 动 IH) 


。 技 术 服 务 热 线 ，400-675-1066 传真 ，0431-84978981 企业 邮箱 : mingrisoR@mingrisoft com 
* Copyright © www.mrbccd.com All Rights Reserved! 


图 16.11 通过 jQuery 为 版 权 列表 设置 样式 
2. parent > child 选择 器 
parent > child 选择 器 中 的 parent 代表 父 元 素 ，child 代表 子 元 素 。 使 用 该 选择 器 只 能 选择 父 元 素 的 
直接 子 元 素 。parent > child 选择 器 的 使 用 方法 如 下 : 
S$("parent > child"); 


回 ”parent 是 指 任 何 有 效 的 选择 器 。 

加 ”child 是 用 以 匹配 元 素 的 选择 器 ， 并 且 它 是 parent 元 素 的 直接 子 元 素 。 
例如 ， 要 匹配 表单 中 的 直接 子 元 素 input， 可 以 使 用 下 面 的 jQuery 代码 : 
$("form > input"); 


【 例 16.06】 本 实例 将 应 用 选择 器 匹配 表单 中 的 直接 子 元 素 input，, 实现 为 匹配 元 素 换 肤 的 功能 。 
关键 步骤 如 下 : (〈 实例 位 置 : 资源 包 \ 源 码 \16\16.06 ) 
(1) 创建 ndex.html 文件 ， 在 该 文件 的 <head> 标 记 中 应 用 下 面 的 语句 引入 jQuery 库 。 
<script type="text/javascript" src="JS/jquery-3.2.1.min.js"></script> 


(2) 在 页 面 的 <body> 标 记 中 添加 一 个 表单 ， 并 在 该 表单 中 添加 6 个 input 元 素 ， 并 且 将 “ 换 肤 ” 
按钮 用 <span> 标 记 括 起 来 ， 关 键 代码 如 下 : 


01 <form id="form1" name="form1" method="post" action="> 

02 姓 &nbsp;&nbsp; 名 : <input type="text" name="name" id="name" /><br /> 

03 籍 &nbsp;&nbsp; 贯 : <input name="native" type="text" id="native" /><br /> 

04 生 &nbsp;&nbsp; 日 : <input type="text" name="birthday" id="birthday" /><br /> 
05 E-mail: <input type="text" name="email" id="email" /><br /> 

06 <span> 

07 <input type="button" name="change" id="change" value=" 换 肤 "/> 


08 </span> 
09 <inputtype="button" name="default" id="default" value=" 恢 复 默 认 "/> 
10 </form> 


(3) 编写 CSS 样式 ， 用 于 指定 input 元 素 的 默认 样式 ， 并 且 添加 一 个 用 于 改变 input 元 素 样式 的 


257 


JavaScript 从 入 门 到 精通 ( 微 视频 精 编 版 ) 


CSS 类 ， 具 体 代码 如 下 : 
<style type="text/css"> 


10 
nb | 


01 


03 


在 上 面 


input{ 
margin:5px; 


border:1px solid #000000; 


</style> 


(4) 在 引入 jQuery 库 的 代码 下 方 编写 jQuery 代码 ， 实 现 匹 配 表单 元 素 的 直接 子 元 素 并 为 其 添加 
和 移 除 CSS 样式 ， 具 体 代 码 如 下 : 


<script type="text/javascript"> 
02 $(document).ready(function(X{ 


明 . 


S$("#change").click(function(X 
$("form>input").addClass("input’"); 


$("#default") .click(function(X 
S$("form>input").removeClass("input"); 


| 添加 的 CSS 类 。 


单 


运行 本 实例 ， 将 显示 如 图 16.12 所 示 的 效果 ， 单 击 “ 换 肤 ” 按 钮 ， 将 显示 如 图 16.13 所 示 的 效果 ， 


/设置 input 元 素 的 外 边 距 为 5 像素 */ 


让 设置 文字 大 小 */ 
/设置 文字 颜色 
让 设置 背景 颜色 */ 
让 设置 边框 */ 


// 绑 定 “ 换 肤 ” 按 钮 的 单 击 事件 
/为 表单 元 素 的 直接 子 元 素 input 添加 样式 


// 绑 定 “ 恢 复 默 认 ” 按 钮 的 单 击 事件 
// 移 除 为 表单 元 素 的 直接 子 元 素 input 添加 的 样式 


的 代码 中 ，addClass() 方 法 用 于 为 元 素 添加 CSS 类 ，removeClass() 方 法 用 于 移 除 为 元 素 


ee 


f# “恢复 默认 ”按钮 ， 将 再 次 显示 如 图 16.12 所 示 的 效果 。 


ES 


【< S| BEBO 


文件 奖 强 EE) 吾 丰 WV) 。 收 划 闪避) 工具 I ” 
Ea 


16.12 默认 的 效果 


Es 


EEC 


图 16.13 单 击 “ 换 肤 ” 按 钮 之 后 的 效果 
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在 图 16.13 中 ， 虽 然 “ 换 肤 ” 按 钮 也 是 form 元 素 的 子 元 素 input， 但 由 于 该 元 素 不 是 form 元 素 的 
直接 子 元 素 ， 所 以 在 执行 换 肤 操作 时 ， 该 按钮 的 样式 并 没有 改变 。 

3. prev + next 选择 器 

prev + next 选择 器 用 于 匹配 所 有 紧 接 在 prev 元 素 后 的 next 元 素 。 其 中 ,prev 和 next 是 两 个 相同 级 
别 的 元 素 。prev + next 选择 器 的 使 用 方法 如 下 : 

$("prev + next"); 

回 ”prev 是 指 任何 有 效 的 选择 器 。 


回 ”next 是 一 个 有 效 选择 器 并 紧 接 着 prev 选择 器 。 
例如 ， 要 匹配 <div> 标 记 后 的 <img> 标 记 ， 可 以 使 用 下 面 的 jQuery 代码 : 


S$("div + img"); 
【 例 16.07】 本 实例 将 筛选 紧 跟 在 <lable> 标 记 后 的 <p> 标 记 ， 并 将 匹配 元 素 的 背景 颜色 改 为 淡 蓝 
色 。 关 键 步骤 如 下 :〈 实例 位 置 : 资源 包 \ 源 码 \16\16.07 ) 
(1) 创建 index.html 文件 ， 在 该 文件 的 <head> 标 记 中 应 用 下 面 的 语句 引入 jQuery 库 。 
<script type="text/javascript" src="JS/jquery-3.2.1.min.js"></script> 
(2) 在 页 面 的 <body> 标 记 中 ， 首 先 添加 一 个 <div> 标 记 ， 并 在 该 <div> 标 记 中 添加 两 个 <label> 标 记 
和 <p> 标 记 ， 其 中 第 二 对 <label> 标 记 和 <p> 标 记 用 <fieldset> 括 起 来 ， 然 后 在 <div> 标 记 的 下 方 再 添加 一 
个 <p> 标 记 ， 关 键 代 码 如 下 : 


01 <div> 

02 <label> 第 一 个 label</label> 

03 <p> 第 一 个 p</p> 

04 <fieldset> 

05 <label> 第 二 个 label</label> 
06 <p> 第 二 个 p</p> 

07 </fieldset> 

08 </div> 


09 ”<p>div 外 面 的 p</p> 


(3) 编写 CSS 样式 ， 用 于 设置 body 元 素 的 字体 大 小 ， 并 且 添 加 一 个 用 于 设置 背景 的 CSS 类 ，, 具 
体 代码 如 下 : 


01 <styletype="text/css"> 


02 body{ 

03 font-size:12px; 让 设置 字体 大 小 */ 
04 : 

05 .background{ 

06 background:#cef; /设置 背景 颜色 
07 } 

08 </style> 
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(4) 在 引入 jQuery 库 的 代码 下 方 编写 jQuery 代码 ， 实 现 匹 配 label 元 素 的 同 级 元 素 p， 并 为 其 添 
加 CSS 类 ， 有 具体 代码 如 下 : 


01 <scripttype="text/javascript"> 
02 S$(document).ready(function(X{ 


03 S$("label+p").addClass("background"); /为 匹配 的 元 素 添加 CSS 类 
04 入 
05 </script> 


运行 本 实例 ， 将 显示 如 图 16.14 所 示 的 效果 。 在 图 中 可 以 看 到 “第 一 个 p” 和 “第 二 个 p” 的 段落 
被 添加 了 背景 ， 而 “div 外 面 的 p” 由 于 不 是 label 元 素 的 同 级 元 素 ， 所 以 没有 被 添加 背景 。 


[人 Ecodestl5w7yn P ~ © | © prev + res 
;文件 四。 闫 太 E) 重 看 收 草 关 全 工具 四 帮 动 () 
入 -个 bb 


第 -个 p 
第 二 个 gbal 
第 -个 p 


rp 


图 16.14 将 label 元 素 的 同 级 元 素 p 的 背景 设置 为 淡 蓝 色 
4. prev ~ siblings 选择 器 
prev ~ siblings 选择 器 用 于 匹配 prev 元 素 之 后 的 所 有 siblings 元 素 。 其 中 , prev 和 siblings 是 两 个 同 
辈 元 素 。prev ~ siblings 选择 器 的 使 用 方法 如 下 : 
$("prev ~ siblings"); 
加 ”prev 是 指 任何 有 效 的 选择 器 。 
回 siblings 是 一 个 有 效 选择 器 ， 其 匹配 的 元 素 和 prev 选择 器 匹配 的 元 素 是 同辈 元 素 。 
例如 ， 要 匹配 div 元 素 的 同辈 元 素 ul， 可 以 使 用 下 面 的 jQuery 代码 : 
S$("div ~ ul"); 
【 例 16.08】 本 实例 将 应 用 选择 器 筛选 页 面 中 div 元 素 的 同辈 元 素 ， 并 为 其 添加 CSS 样式 。 关 
键 步骤 如 下 : 〈 实例 位 置 : 资源 包 \ 源 码 \16\16.08 ) 
(1) 创建 index.html 文件 ， 在 该 文件 的 <head> 标 记 中 应 用 下 面 的 语句 引入 jQuery 库 。 
<script type="text/javascript" src="JS/jquery-3.2.1.min.js"></script> 
(2) 在 页 面 的 <body> 标 记 中 ， 首 先 添加 一 个 <div> 标 记 ， 并 在 该 <div> 标 记 中 添加 两 个 <p> 标 记 ， 
然后 在 <div> 标 记 的 下 方 再 添加 一 个 <p> 标 记 ， 关 键 代码 如 下 : 


01 <div> 
02 <p> 第 一 个 p</p> 
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03 <p> 第 二 个 p</p> 
04 </div> 
05 ”<p>div 外 面 的 p</p> 


(3) 编写 CSS 样式 ， 用 于 设置 body 元 素 的 字体 大 小 ， 并 且 添 加 一 个 用 于 设置 背景 的 CSS 类 , 具 
体 代码 如 下 : 


01 <style type="text/css"> 


02 body{ 

03 font-size:12px; * 设 置 字体 大 小 */ 
04 } 

05 .background{ 

06 background:#cef; 让 设置 背景 颜色 */ 
07 》 

08 </style> 


(4) 在 引入 jQuery 库 的 代码 下 方 编写 jQuery 代码 ， 实 现 匹配 div 元 素 的 同辈 元 素 p， 并 为 其 添加 
CSS 类 ， 具 体 代码 如 下 : 


01 <scripttype="text/javascript"> 
02 $(document).ready(function(X{ 


03 $("div~p").addClass("background"); /为 匹配 的 元 素 添加 CSS 类 
04 »); 
05 </script> 


运行 本 实例 ， 将 显示 如 图 16.15 所 示 的 效果 。 在 图 中 可 以 看 到 “div 外 面 的 p” 被 添加 了 背景 ， 而 
“第 一 个 p” 和 “第 二 个 p” 的 段落 由 于 不 是 div 元 素 的 同辈 元 素 ， 所 以 没有 被 添加 背景 。 


【< 加 BE Pr olBprer 


文件 昌 ”六 强 {E) 豆 看 \W 收 京 交 ( 和 A 工具 DD 和 


第 一 个 
第 二 个 p 
nr 外面 9p 


图 16.15 为 div 元 素 的 同辈 元 素 设置 背景 
16.3.4 ”过滤 选 择 器 
过 滤 选 择 器 包括 简单 过 滤器 、 内 容 过 滤器 、 可 见 性 过 滤器 、 表 单 对 象 的 属性 过 滤器 和 子 元 素 选择 
器 等 。 下 面 分 别 进行 详细 介绍 。 
1 简单 过 滤器 


简单 过 滤器 是 指 以 冒号 开头 ， 通 常用 于 实现 简单 过 滤 效 果 的 过 滤器 。 例 如 ， 匹 配 找到 的 第 一 个 元 
素 等 。jQuery 提供 的 简单 过 滤器 如 表 16.1 所 示 。 
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表 16.1 jQuery 的 简单 过 滤器 


过 滤 器 说 明 示例 
:first 匹配 找到 的 第 一 个 元 素 ， 它 是 与 选择 器 结合 使 用 的 S$("tr:first") ” // 匹 配 表格 的 第 一 行 
:last 匹配 找到 的 最 后 一 个 元 素 ， 它 是 与 选择 器 结合 使 用 的 _| $Ctrlast) /匹配 表格 的 最 后 一 行 
even 匹配 所 有 索引 值 为 偶数 的 元 素 ， 索 引 值 从 0 开始 计数 | $("tr:even") ”// 匹 配 索 引 值 为 偶数 的 行 
:odd 匹配 所 有 索引 值 为 奇数 的 元 素 ， 索 引 值 从 0 开始 计数 | $("tr:odd") /匹配 索引 值 为 奇数 的 行 
:eq(index) 匹配 一 个 给 定 索引 值 的 元 素 $("div:eq(1)") // 匹 配 第 二 个 div 元 素 
:gt(index) 匹配 所 有 大 于 给 定 索引 值 的 元 素 $("div:gt(0)") /匹配 第 二 个 及 以 上 的 div 元素 
:lt(index) 匹配 所 有 小 于 给 定 索引 值 的 元 素 $C"div:It(2)") /匹配 第 二 个 及 以 下 的 div 元 素 
:header 匹配 如 hl, h2, h3…… 之 类 的 标题 元 素 S$(":header") ”// 匹 配 全 部 的 标题 元 素 
:not(selector) | 去 除 所 有 与 给 定 选 择 器 匹配 的 元 素 Mp nC ee /匹配 没有 被 选中 
的 input 元 素 
:animated 匹配 所 有 正在 执行 动画 效果 的 元 素 $(":animated ") /匹配 所 有 正在 执行 的 动画 
【 例 16.09】 本 实例 将 通过 几 个 简单 过 滤器 控制 表格 中 相应 行 的 样式 , 实现 一 个 带 表 头 的 双色 表 


格 。 关 键 步骤 如 下 : (实例 位 置 : 资源 包 \ 源 码 \16\16.09 ) 


(1) 创建 index.html 文件 ， 在 该 文件 的 <head> 标 记 中 应 用 下 面 的 语句 引入 jQuery 库 。 


<script type="text/javascript" src="JS/jquery-3.2.1.min.js"></script> 


(2) 在 页 面 的 <body> 标 记 中 ， 添 加 一 个 五 行 五 列 的 表格 ， 代 码 如 下 : 


01 <table width="98%" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#3F873B"> 


02 
03 
04 
05 
06 
07 
08 
09 
10 
i 
12 
13 
14 
15 
16 
入 
18 
19 
20 
21 
22 
23 
24 
25 


262 


<tr> 


<td width="11%" height="27"> 编 号 </td> 


<td width="14%"> 祝 福 对 象 </td> 
<td width="12%"> 祝 福 者 </td> 
<td width="33%"> 字 条 内 容 </td> 
<td width="30%"> 发 送 时 间 </td> 
</tr> 
<tr> 
<td height="27">1</td> 
<td>mjh</td> 
<td> 云 远 </td> 
<td> 愿 你 幸福 快乐 每 一 天 ! </td> 
<td>2017-07-05 13:06:06</td> 
</tr> 
<tr> 
<td height="27">2</td> 
<td> 云 远 </td> 
<td>mjh</td> 
<td> 每 天 有 份 好 心情 ! </td> 
<td>2017-07-05 13:26:17</td> 
</tr> 
<tr> 
<td height="27">3</td> 
<td>mjh</td> 
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<td> 云 远 </td> 
<td> 谢 谢 你 陪 我 到 任何 地 方 ! </td> 
<td>2017-07-05 13:36:06</td> 
</tr> 
<tr> 
<td height="27">4</td> 
<td> 云 远 </td> 
<td>mjh</td> 
<td> 跟 着 我 海 角 和 天 涯 ! </td> 
<td>2017-07-05 13:46:06</td> 
</tr> 
</table> 
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(3) 编写 CSS 样式 ， 通 过 元 素 选择 符 设 置 单 元 格 的 样式 ， 并 且 编 写 也 、even 和 odd 3 个 类 选择 符 ， 
用 于 控制 表格 中 相应 行 的 样式 ， 具 体 代码 如 下 : 


01 
02 
03 


<style type="text/css"> 

td{ 
font-size:12px; 
padding:3px; 

} 

th{ 
background-color:#B6DF48; 
font-weight:bold; 
text-align:center; 

} 

.even{ 
background-color:#E8F3D1; 

} 

.odd{ 
background-color:#F9FCEF; 


} 
</style> 


"设置 单元 格 中 的 字体 大 小 */ 
"设置 内 边 距 / 


"设置 背景 颜色 */ 
人 * 设 置 文 字 加 粗 显示 */ 
/文字 居中 对 齐 */ 


人 * 设 置 奇数 行 的 背景 颜色 */ 


人 * 设 置 偶数 行 的 背景 颜色 */ 


(4) 在 引入 jQuery 库 的 代码 下 方 编写 jQuery 代码 ， 实 现 匹配 表格 中 相应 的 行 ， 并 为 其 添加 CSS 


类 ， 有 具体 代码 如 下 : 
01 <scripttype="text/javascript"> 
02 S$(document).ready(function() { 
03 S$("tr-even").addClass("even"); 
04 $("tr:odd").addClass("odd"); 
05 S$("tr:first").removeClass("even"); 
06 S$("tr:first").addClass("th"); 
07 六 
08 </script> 
在 上 Ff 


加 ， 和 否则 ， 新 添加 的 CSS 类 将 不 起 作用 。 


/设置 偶数 行 所 用 的 CSS 类 
/设置 奇数 行 所 用 的 CSS 类 
// 移 除 even 类 

/添加 th 类 


面 的 代码 中 ， 为 表格 的 第 1 行 添加 也 类 时 ， 需 要 先 将 该 行 应 用 的 even 类 移 除 ， 然 后 再 进行 添 
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运行 本 实例 ,将 显示 如 图 16.16 所 示 的 效果 。 其 中 ,第 1 行为 表 头 , 编号 分 别 为 1 和 3 的 行 采用 的 
是 偶数 行 样式 ， 编 号 分 别 为 2 和 4 的 行 采 用 的 是 奇数 行 的 样式 。 


文件 (日 ”六 疆 (各 看 VV) 履 重 交 则 ) 


大 你 辜 福 快乐 每 一 天 ! 2017-07.05 1306406 


每 天 有 份 好 心情 ! [2017-07-05 1326:17 
谢谢 你 障 我 到 任何 地 方 ! |2017-07-05 1336:06 


跟着 我 海 角 和 天 涯 ! |2017-07-05 13:46:06 


图 16.16 带 表 头 的 双色 表格 
2. 内 容 过 滤器 
内 容 过 滤器 就 是 通过 DOM 元 素 包含 的 文本 内 容 以 及 是 否 含有 匹配 的 元 素 进行 筛选 。 内 容 过 滤器 
共 包 括 :contains(text)、:empty、:has(selector) 和 :parent 4 种 ， 如 表 16.2 所 示 。 
表 16.2 jQuery 的 内 容 过 滤器 
匹配 包含 给 定 文本 的 元 素 


匹配 所 有 不 包含 子 元 素 或 者 文本 的 空 元 素 
【 例 16.10】 本 实例 将 应 用 内 容 过 滤器 匹配 为 空 的 单元 格 、 不 为 空 的 单元 格 和 包含 指定 文本 的 
单元 格 。 关 键 步 又 如 下 :( 实例 位 置 : 资源 包 \ 源 码 \16\16.10 ) 
(1) 创建 index.html 文件 ， 在 该 文件 的 <head> 标 记 中 应 用 下 面 的 语句 引入 jQuery 库 。 
<script type="text/javascript" src="JS/jquery-3.2.1.min.js"></script> 
(2) 在 页 面 的 <body> 标 记 中 ， 添 加 一 个 五 行 五 列 的 表格 ， 代 码 如 下 : 


01 <table width="98%" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#3F873B"> 
02 <tr> 


S$S("licontains(DOM")") /匹配 含有 DOM 文本 内 容 的 二 


:contains(text) 元 素 


// 匹 配 不 包含 子 元 素 或 者 文本 的 单元 格 
/匹配 含有 <p> 标 记 的 单元 格 
/匹配 含有 子 元 素 或 者 文本 的 单元 格 


03 <td width="11%" height="27" align="center"> 编 号 </td> 
04 <td width="14%" align="center"> 祝 福 对 象 </td> 

05 <td width="12%" align="center"> 祝 福 者 </td> 

06 <td width="33%" align="center"> 字 条 内 容 </td> 

07 <td width="30%" align="center"> 发 送 时 间 </td> 

08 </tr> 

09 <tr> 

10 <td height="27">1</td> 

11 <td>mjh</td> 
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12 <td> 云 远 </td> 

13 <td> 愿 你 幸福 快乐 每 一 天 ! </td> 
14 <td>2017-07-05 13:06:06</td> 
5 </tr> 

16 <tr> 

17 <td height="27">2</td> 

18 <td> 云 远 </td> 

19 <td>mjh</td> 

20 <td> 每 天 有 份 好 心情 ! </td> 
21 <td>2017-07-05 13:26:17</td> 
22 </tr> 

23 <tr> 

24 <td height="27">3</td> 

25 <td>mjh</td> 

26 <td> 云 远 </td> 

27 <td> 谢 谢 你 陪 我 到 任何 地 方 ! </td> 
28 <td></td> 

29 </tr> 

30 <tr> 

31 <td height="27">4</td> 

32 <td> 云 远 </td> 

33 <td>mjh</td> 

34 <td> 跟 着 我 海 角 和 天 涯 ! </td> 
35 <td>2017-07-05 13:46:06</td> 
36 </tr> 

37 </table> 


(3) 在 引入 jQuery 库 的 代码 下 方 编写 jQuery 代码 ， 实 现 匹 配 表格 中 不 同 的 单元 格 ， 并 分 别 为 匹 
配 到 的 单元 格 设置 背景 颜色 、 添 加 默认 内 容 和 设置 文字 颜色 ， 有 具体 代码 如 下 : 
01 <scripttype="text/javascript"> 


02 S$(document).ready(function(X{ 
03 $("td:parent").css("background-color","#E8F3D1"); 。 // 为 不 为 空 的 单元 格 设置 背景 颜色 


04 $("td:empty").html(" 暂 无 内 容 "); /为 空 的 单元 格 添加 默认 内 容 
05 // 将 含有 文本 mjh 的 单元 格 的 文字 颜色 设置 为 红色 

06 $("td:contains('mjh')").css("color","red"); 

07 六 

08 </script> 


运行 本 实例 将 显示 如 图 16.17 所 示 的 效果 。 
3. 可 见 性 过 滤器 


元 素 的 可 见 状态 有 两 种 ， 分 别 是 隐藏 状态 和 显示 状态 。 可 见 性 过 滤器 就 是 利用 元 素 的 可 见 状态 匹 
配 元 素 的 。 因 此 ， 可 见 性 过 滤器 也 有 两 种 ， 一 种 是 匹配 所 有 可 见 元 素 的 :visible 过 滤器 ， 另 一 种 是 匹配 
所 有 不 可 见 元 素 的 :hidden 过 滤器 。 
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司 EACoda\sLN5W0Winc 人 - C | 夺 央 窑 过 洁 才 的 实例 x 
文件 (站 ”六 和 (EF) 可 看 VI 收 训 夫 (A) 工具 [0 帮 动 (H) 
编号 | 祝福 对 象 | 祝福 者 六 条 骨 容 发 送 时 间 
1 ne 云 远 。 | 原 你 幸福 快乐 每 一 天 ! 12017.07.05 1306:06 
云 远 jh 每 天 有 份 好 心情 : 2017-07-05 1326:17 
3 号 云 远 。 | 谢 潮 你 陪 我 到 任何 地 方 ! 。 | 斩 无 内 容 
村 去 远 | 跟着 我 海 角 和 天 下! 2017.07.05 1346:06 


图 16.17 匹配 表格 中 不 同 的 单元 格 


VT 
在 应 用 :hidden 过 滤器 时 ，display 属性 是 none 以 及 input 元素 的 type 属性 为 hidden 的 元 素 都 会 


被 匹配 到 。 


例如 ， 在 页 面 中 添加 3 个 input 元 素 ， 其 中 第 一 个 为 显示 的 文本 框 ， 第 二 个 为 不 显示 的 文本 框 ， 第 
三 个 为 隐藏 域 ， 代 码 如 下 : 


01 ”<input type="text" value=" 显 示 的 input 元 素 "> 

02 ”<input type="text" value=" 不 显示 的 input 元 素 " style="display:none"> 

03 ”<input type="hidden" value=" 我 是 隐藏 域 "> 

通过 可 见 性 过 滤器 获取 页 面 中 显示 和 隐藏 的 input 元 素 的 值 ， 代 码 如 下 : 


01 <scripttype="text/javascript"> 
02 S$(document).ready(function() { 


03 var visibleVal = $("input:visible").val(); // 获 取 显 示 的 input 的 值 

04 var hiddenVal1 = $("input:hidden:eq(0)").val(); // 获 取 第 一 个 隐藏 的 input 的 值 
05 var hiddenVal2 = $("input:hidden:eq(1)").val(); 1/ 获取 第 二 个 隐藏 的 input 的 值 
06 alert(visibleVal+"n"+hiddenVal1+"n"+hiddenVal2); /弹出 获取 的 信息 

07 » 

08 </script> 


运行 结果 如 图 16.18 所 示 。 


图 16.18 弹出 显示 和 隐藏 的 input 元 素 的 值 
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4. 表单 对 象 的 属性 过 滤器 


表单 对 象 的 属性 过 滤器 通过 表单 元 素 的 状态 属性 〈 例 如 选中 、 不 可 用 等 状态 ) 匹配 元 素 ， 包 
括 :checked 过 滤器 、:disabled 过 滤器 、:enabled 过 滤器 和 :selected 过 滤器 4 种 ， 如 表 16.3 所 示 。 


表 16.3 jQuery 的 表单 对 象 的 属性 过 滤器 


过 滤器 | 说明 | 示例 
:checked 匹配 所 有 被 选中 元 素 $("input:checked") ”// 匹 配 checked 属性 为 checked 的 input 元 素 
-disabled $("input-disabled") /匹配 disabled 属性 为 disabled 的 input 元 素 
:enabled 匹配 所 有 可 用 的 元 素 $("input:enabled ") /匹配 enabled 属性 为 enabled 的 input 元 素 
:selected 匹配 所 有 选中 的 option 元 素 ”| $("select option:selected") // 匹 配 select 元 素 中 被 选中 的 option 元 素 


【 例 16.11】 本 实例 将 利用 表单 对 象 的 属性 过 滤器 匹配 表单 中 相应 的 元 素 , 并 为 匹配 到 的 元 素 执 


行 不 同 的 操作 。 


关键 步 又 如 下 :( 实例 位 置 : 资源 包 \ 源 码 \16\16.11 ) 


(1) 创建 index.html 文件 ， 在 该 文件 的 <head> 标 记 中 应 用 下 面 的 语句 引入 jQuery 库 。 


<script type="text/javascript" src="JS/jquery-3.2.1.min.js"></script> 


(2) 在 页 面 的 <body> 标 记 中 ， 添 加 一 个 表单 ， 并 在 该 表单 中 添加 3 个 复 选 框 、 一 个 不 可 用 按钮 和 
-个 下 拉 菜 单 ， 其 中 ， 前 两 个 复 选 框 为 选中 状态 ， 关 键 代 码 如 下 : 


01 <form> 


02 复 选 框 1: <input type="checkbox" checked="checked" value=" 复 选 框 1"/> 
03 复 选 框 2: <input type="checkbox" checked="checked" value=" 复 选 框 2"/> 
04 复 选 框 3: <input type="checkbox" value=" 复 选 框 3"/><br /> 

05 ”不 可 用 按钮 ，<input type="button" value=" 不 可 用 按钮 " disabled><br /> 

06 ”下 拉 菜 单 : 

07 <select onchange="selectVal()"> 

08 <option value=" 菜 单项 1"> 菜 单项 1</option> 

09 <option value=" 菜 单项 2"> 菜 单项 2</option> 

10 <option value=" 菜 单项 3"> 菜 单项 3</option> 

11 </select> 


12 </form> 


(3) 在 引入 jQuery 库 的 代码 下 方 编写 jQuery 代码 ， 实 现 匹 配 表单 中 的 被 选中 的 checkbox 元 素 、 
不 可 用 元 素 和 被 选中 的 option 元 素 ， 有 具体 代码 如 下 : 


01 <scripttype="text/javascript"> 
02 S$(document).ready(function() { 


03 S$("input:checked").css("display","none"); /隐藏 选中 的 复 选 框 

04 S$("input:disabled").val(" 我 是 不 可 用 的 "); // 为 灰色 不 可 用 按钮 赋值 

05 六 

06 function selectVal(X{ /下 拉 菜 单 变化 时 执行 的 函数 
07 alert($("select option:selected").val()); /显示 选中 的 值 

08 } 

09 </script> 
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运行 本 实例 ， 选 中 下 拉 菜 单 中 的 菜单 项 3， 将 弹出 对 话 框 显示 选中 菜单 项 的 值 ， 如 图 16.19 所 示 。 
在 该 图 中 ， 设 置 选中 的 两 个 复 选 框 为 隐藏 状态 ， 另 外 的 一 个 复 选 框 没有 被 隐藏 ， 不 可 用 按钮 的 value 
值 被 修改 为 “我 是 不 可 用 的 ”。 


图 16.19 利用 表单 对 象 的 属性 过 滤器 匹配 表单 中 相应 的 元 素 
5. 子 元素 选 择 器 
子 元 素 选择 器 就 是 筛选 给 定 某 个 元 素 的 子 元 素 ， 具 体 的 过 滤 条 件 由 选择 器 的 种 类 而 定 。jQuery 提 
供 的 子 元 素 选择 器 如 表 16.4 所 示 。 
表 16.4 jQuery 的 子 元 素 选择 器 


选 择 器 说 了 明 示例 
:first-child 下 内 直率 生 “人 | scallifistehald9 1 本 配 可 元素 中 的 第 一 个 子 元 素 
:lastchild 和 素 的 最 后 “| scmiilastchild9 /匹配 元 素 中 的 最 后 一 个 子 元 素 上 
:only-child 匹配 元 素 中 唯一 的 子 元 素 S$("ul li:only-child") /匹配 只 含有 一 个 1 元 素 的 元 素 中 的 1 
:nth-child(index/even/ Os $("ul liinth-child(even)") // 匹 配 ul 中 索引 值 为 偶数 的 二 元 素 
odd/equation) 开始 ， 而 不 是 从 0 开始 S$("ul linth-child(3)") /匹配 ul 中 第 三 个 1 元 素 


16.3.5 ”属性 选择 器 


属性 选择 器 就 是 通过 元 素 的 属性 作为 过 滤 条 件 进行 筛选 对 象 。jQuery 提供 的 属性 选择 器 如 表 16.5 
所 示 。 


表 16.5 jQuery 的 属性 选择 器 


选 择 器 说 明 示例 
[attribute] | 匹配 包含 给 定 属性 的 元 素 。 | SCdivname]) // 匹 配合 有 name 属性 的 div 元 素 
个 
[attribute=value] ee 的 属性 是 基 个 特定 $("div[name='test]") /匹配 name 属性 是 test 的 div 元 素 
匹配 所 有 含有 指定 的 属性 , 但 | 。，. 四 二 
[attribute!=value] 属性 不 等 于 特定 值 的 元 素 $("div[name!='test]") /匹配 name 属性 不 是 test 的 div 元 素 
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续 表 
选 择 器 说 有明 示 例 
给 定 的 些 本 
[attribute*=value] 和 站 的 属性 是 包含 某 $("divIname*='test]") /匹配 name 属性 中 含有 test 值 的 div 元 素 
给 以 某 些 
[attribute^=value] 匹配 给 定 的 属性 是 以 某 些 什 $("div[name^='test]") // 匹 配 name 属性 以 test 开头 的 div 元 素 
开始 的 元 素 
以 某 些 
[attribute$=value] 下 配给 定 的 属性 是 以 某 些 值 S$("div[name$='test]") // 匹 配 name 属性 以 test 结尾 的 div 元 素 
结尾 的 元 素 
[selectorl][selector2] | 复合 属性 选择 器 , 需要 同时 满 | $("div[id][name^='test]") /匹配 具有 id 属性 并 且 name 属性 是 以 
[selectorN] 足 多 个 条 件 时 使 用 test 开头 的 div 元 素 


16.3.6 ”表单 选择 器 


表单 选择 器 是 匹配 经 常 在 表单 中 出 现 的 元 素 ， 但 是 匹配 的 元 素 不 一 定 在 表单 中 。jQuery 提供 的 表 
单 选择 器 如 表 16.6 所 示 。 


选 择 器 


:input 匹配 所 有 的 input 元 素 


表 16.6 jQuery 的 表单 选择 器 
说 明 示例 
SO:input) /匹配 所 有 的 input 元 素 
$("form :input") /匹配 <form> 标 记 中 的 所 有 
input 元 素 ， 需 要 注意 ， 在 form 和 :之 间 有 一 


个 空格 
:button 匹配 所 有 的 普通 按钮 ， 即 type="button" 的 input 元 素 $(":button") /匹配 所 有 的 普通 按钮 
:checkbox | 匹配 所 有 的 复 选 框 $(":checkbox") /匹配 所 有 的 复 选 杠 
:file 匹配 所 有 的 文件 域 $(":file") /匹配 所 有 的 文件 域 
:hidden 匹配 所 有 的 不 可 见 元 素 , 或 者 type 属性 为 hidden 的 元 素 | $(":hidden") /匹配 所 有 的 不 可 见 元 素 
:image 匹配 所 有 的 图 像 域 $("-image") /匹配 所 有 的 图 像 域 
:password | 匹配 所 有 的 密码 域 $(":password") /匹配 所 有 的 密码 域 
:Tadio 匹配 所 有 的 单 选 按钮 $(":radio") // 匹 配 所 有 的 单 选 按钮 


:Teset 匹配 所 有 的 重 置 按钮 ， 即 type="reset" 的 input 元 素 S$(":reset") // 匹 配 所 有 的 重 置 按钮 


:submit 匹配 所 有 的 提交 按钮 ， 即 type="submit" 的 input 元 素 $C':submit") /匹配 所 有 的 提交 按钮 
‘text 匹配 所 有 的 单行 文本 框 S$(":text") /匹配 所 有 的 单行 文本 框 


【 例 16.12】 


本 实例 将 利用 表单 选择 器 匹配 表单 中 相应 的 元 素 , 并 为 匹配 到 的 元 素 执行 不 同 的 操 


作 。 关 键 步 又 如 下 :( 实例 位 置 : 资源 包 \ 源 码 \16\16.12 ) 


(1) 创建 index.html 文件 ， 在 该 文件 的 <head> 标 记 中 应 用 下 面 的 语句 引入 jQuery 库 。 


<script type="text/javascript" src="JS/jquery-3.2.1.min.js"></script> 


(2) 在 页 面 的 <body> 标 记 中 ， 添 加 一 个 表单 ， 并 在 该 表单 中 添加 复 选 框 、 单 选 按 钮 、 图 像 域 、 文 
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件 域 、 密 码 域 、 文 本 框 、 普 通 按钮 、 重 置 按钮 、 提 交 按 钮 和 隐藏 域 等 input 元 素 ， 关 键 代码 如 下 : 


<form> 
复 选 框 : <input type="checkbox" /> 
单 选 按钮 : <input type="radio" /> 
图 像 域 : <input type="image" /><br> 
文件 域 : <input type="file" /><br> 
密码 域 : <input type="password" width="150px" /><br> 
文本 框 : <input type="text" width="150px" /><br> 
普通 按钮 :<input type="button" value=" 普 通 按 钮 " /><br> 
重 置 按钮 : <input type="reset" value=" /><br> 
提交 按钮 : <input type="submit" value=" /><br> 
<input type="hidden" value=" 这 是 隐藏 的 元 素 " /> 


<div id="testDiv"><span style="color:blue;"> 隐 藏 域 的 值 : </span></div> 


</form> 


(3) 在 引入 jQuery 库 的 代码 下 方 编写 jQuery 代码 ， 实 现 匹 配 表单 中 的 各 个 表单 元 素 ， 并 
同 的 操作 ， 具 体 代码 如 下 : 


01 
02 
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<script type="text/javascript"> 
S$(document).ready(function() { 


S$(":checkbox").attr("checked","checked"); // 选 中 复 选 框 
$(":radio").attr("checked","checked"); 1/ 选中 单 选 按钮 
$("“image").attr("src","images/fish1.jpg"); // 设 置 图 片 路 径 
S$("file").hide(): // 隐 藏 文件 域 
$(":password").val("123"); // 设 置 密码 域 的 值 
$(":text").val(" 文 本 框 "); // 设 置 文本 框 的 值 
$(":button").attr("disabled","disabled"); // 设 置 按钮 不 可 用 
$("reset").val(" 重 置 按钮 "); // 设 置 重 置 按钮 的 值 
$(":submit").val(" 提 交 按 钮 "); /设置 提交 按钮 的 值 


$("#testDiv").append($("input:hidden:eq(1)").val()); // 显 示 隐 藏 域 的 值 


站 EACode\SL\5U2iinc DO 
四 将 汝 日 。 豆 种 W 工具 四 大 动 旧 ) 


: 回 单 选 按钮 ，@@ 图 像 域 : 
域 ， 


提交 按钮 ，| 提交 按钮 
隐藏 域 的 值 ， 这 是 隐藏 的 元 素 


图 16.20 利用 表单 选择 器 匹配 表单 中 相应 的 元 素 


F 实 现 不 
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16.4 实 战 


16.4.1 鼠标 指向 行 变色 


为 表格 添加 隔行 换 色 并 且 鼠 标 指向 行 变色 的 功能 ， 运 行 结果 如 图 16.21 所 示 。( 实例 位 置 : 资源 包 \ 
源码 \16\ 实 战 \01) 


文件 四” 六 坊 (E) 至 看 MV) 收 齐 闪 他 ) 工具 中 


产品 名 称 产地 
爱 美 电视 机 福州 爱 美 电子 
| 北京 


图 1621 民 标 指向 行 变色 
16.4.2 ”为 指定 的 图 书 名 称 添 加 字体 颜色 


在 图 书 列 表 中 ， 为 指定 的 图 书 名 称 添 加 字体 颜色 ， 运 行 结果 如 图 16.22 所 示 。( 实例 位 置 : 资源 包 \ 
源码 \16\ 实 战 \02 ) 


FE EE3 


可 
€ (OE p -< | 避 Pss#sfG5tn、x| | 取证) 


文件 (有 ”六 加 (FE) 。 焉 看 (V) ” 收 茂 交 {A) ”工具 (D) 帮 动 (H) 


编号 JavaScript HIML PHP 


JavaScript 从 入 门 到 精通 |HTML 从 入 门 到 精通 。 |PHP 从 入 门 到 精通 
JavaScript 自 学 视频 教程 HTML 自 学 视频 教程 ”|PHP 自 学 视频 教程 
JavaScript 入 门 经 典 HTML 入 门 经 典 了 PHP 入门 经 典 


图 16.22 ”为 指定 的 图 书 名 称 添加 字体 颜色 
16.4.3 ”设置 注册 页 面 中 的 按钮 是 否 可 用 
设置 用 户 注册 页 面 中 的 按钮 是 否 可 用 ， 当 任意 一 个 表单 元 素 内 容 不 为 空 时 ,“ 重 置 ” 按 钮 可 用 ， 当 


所 有 表单 元 素 内 容 不 为 空 时 ,“ 提 交 ” 按 钮 可 用 ， 运 行 结果 如 图 16.23 和 图 16.24 所 示 。( 实例 位 置 ; 资 
源 包 \ 源 码 \16\ 实 战 \03 ) 
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< (EEC EE 
文件 (月 ” 光 强 (E) ”至 看 (V) ” 履 重 闪 (A) 工具 (D) 骨 动 (H) 


Ocean - o[ © eneanr 
文件 (F) 。 娘 强 (E) 下 看 (V) 站 功夫 (A) 工具 (T) 

用 户 昵称 ，| 芋 哥 

注册 密码 ， 


亲 动 (H) 


用 户 昵称 ， 
确认 密码 : 


注册 密码 : 
确认 密码 ， 


[区 ] 


16.23 重 置 按钮 可 用 


图 16.24 提交 按钮 可 用 


16.5 ”处 


个 基本 的 了 解 。 


本 章 介绍 了 jQuery 的 特点 、 下 载 和 配置 , 并 详细 地 介绍 了 jQuery 选择 器 。 相 对 于 传统 的 JavaScript 
而 言 ，jQuery 选择 对 象 的 方法 更 多 样 、 更 简洁 、 更 方便 。 通 过 本 章 的 学 习 ， 可 以 使 读者 对 jQuery 有 一 


s/s 


jQuery 控制 页 面 
( 名 视频 讲解 ，34 分 钟 ) 


jQuery 提供 了 对 页 面 元 素 进 行 操作 的 方法 , 这 些 方法 相 比 JavaScript 操作 页 面 
元 素 的 方法 更 加 方便 灵活 。 本 章 将 对 jQuery 控制 页 面 元 素 进 行 介绍 。 

通过 学 习 本 章 ， 读 者 主要 事 担 以 下 内 容 : 

”对 元 素 的 内 容 和 值 进行 操作 的 方法 

MW ”对 页 面 中 的 DOM 节点 进行 操作 的 方法 

MH ”对 页 面 元 素 的 属性 进行 操作 的 方法 

MH ”对 元 素 的 CSS 样式 进行 操作 的 方法 
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17.1 对 元 素 内 容 和 值 进行 操作 


jQuery 提供 了 对 元 素 的 内 容 和 值 进行 操作 的 方法 。 其 中 ， 元 素 的 值 是 元 素 的 一 种 属性 ， 大 部 分 元 
素 的 值 都 对 应 value 属性 。 

元 素 的 内 容 是 指定 义 元 素 的 起 始 标 记 和 结束 标记 中 间 的 内 容 ， 又 可 分 为 文本 内 容 和 HTML 内 容 。 
下 面 通过 一 段 代 码 来 说 明 。 

01 <div> 

02 <p> 测 试 内 容 </p> 

03 </div> 

在 这 段 代码 中 ，div 元 素 的 文本 内 容 就 是 “测试 内 容 ”， 文 本 内 容 不 包含 元 素 的 子 元 素 ， 只 包含 元 
素 的 文本 内 容 。 而 “<p> 测 试 内容 </p>” 就 是 <div> 元 素 的 HTML 内 容 ，HTML 内 容 不 仅 包含 元 素 的 文 
本 内 容 ， 而 且 还 包含 元 素 的 子 元 素 。 


17.1.1 ”对 元 素 内 容 操 作 


由 于 元 素 内 容 又 可 分 为 文本 内 容 和 HTML 内 容 ， 那 么 ， 对 元 素 内 容 的 操作 也 可 以 分 为 对 文本 内 容 
操作 和 对 HIML 内 容 进行 操作 。 下 面 分 别 进行 详细 介绍 。 

回 ”对 文本 内 容 操作 

jQuery 提供 了 text0 和 text(val) 两 个 方法 用 于 对 文本 内 容 操 作 ， 其 中 ，text0 方 法 用 于 获取 全 部 匹配 
元 素 的 文本 内 容 ，text(val) 方 法 用 于 设置 全 部 匹配 元 素 的 文本 内 容 。 例 如 ， 在 一 个 HIML 页 面 中 , 包括 
下 面 3 行 代码 。 

01 <div> 

02 <span id="clock"> 当 前 时 间 : 2017-07-12 星期 三 13:20:10</span> 

03 </div> 

要 获取 并 输出 div 元 素 的 文本 内 容 ， 可 以 使 用 下 面 的 代码 : 

alert($("div").text()); /输出 div 元 素 的 文本 内 容 


得 到 的 结果 如 图 17.1 所 示 。 


当前 革 间 : 2017-07-12 本 网 = 13:20:10 


图 17.1 获取 到 的 div 元 素 的 文本 内 容 
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/ 
EC 说 明 
text0 方 法 取得 的 结果 是 所 有 匹配 元 素 包 含 的 文本 组 合 起 来 的 文本 内 容 ， 这 个 方法 也 对 久 ML 文 
档 有 效 ， 可 以 用 text0 方 法 解析 XXML 文档 元 素 的 文本 内 容 。 
要 重新 设置 div 元 素 的 文本 内 容 ， 可 以 使 用 下 面 的 代码 : 
$("div").text(" 我 是 通过 text() 方 法 设置 的 文本 内 容 "); /重新 设置 div 元 素 的 文本 内 容 
$ 息 0 注意 
使 用 text() 方 法 重新 设置 div 元 素 的 文本 内 容 后 , div 元 素 原 来 的 内 容 将 被 新 设置 的 内 容 替 换 掉 ， 
包括 HTML 内 容 。 例 如， 对 下 面 的 代码 : 


<div><span id="clock"> 当 前 时 间 : 2017-07-12 星期 三 13:20:10</span></div> 


应 用 “$("div").text(" 我 是 通过 text(0 方 法 设置 的 文本 内 容 ");” 设 置 值 后 ， 该 <div> 标 记 的 内 容 将 
变 为 : 
<div> 我 是 通过 text() 方 法 设置 的 文本 内 容 </div> 


回 对 HTML 内 容 操作 

jQuery 提供 了 html0 和 html(vaD) 两 个 方法 用 于 对 HTML 内 容 操 作 ， 其 中 ,html0 方 法 用 于 获取 第 一 
个 匹配 元 素 的 HTML 内 容 ，text(val) 方 法 用 于 设置 全 部 匹配 元 素 的 HTML 内 容 。 例 如 ， 在 一 个 HTML 
页 面 中 ， 包 括 下 面 3 行 代码 。 


01 <div> 

02 <span id="clock"> 当 前 时 间 : 2017-07-12 星期 三 13:20:10</span> 

03 </div> 

要 获取 并 输出 div 元 素 的 HTML 内 容 ， 可 以 使 用 下 面 的 代码 : 

alert($("div").html()); /输出 div 元 素 的 HTML 内 容 


得 到 的 结果 如 图 17.2 所 示 。 


用。 -pen -er > : 2017-07-12 县 三 
13:20:10</span> 


17.2 ”获取 到 的 div 元 素 的 HTML 内 容 
要 重新 设置 div 元 素 的 HTML 内 容 ， 可 以 使 用 下 面 的 代码 : 


S$("div").html("<span style='color:#FF0000'> 我 是 通过 html() 方 法 设置 的 HTML 内容 </span>");// 重 新 设置 div 元 素 
的 HTML 内 容 
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人 0 注意 


html0 方 法 与 html(val) 方 法 不 能 用 于 XML 文档 ， 但 是 可 以 用 于 XHTML 文档 。 


下 面 通过 一 个 具体 的 例子 ， 说 明 对 元 素 的 文本 内 容 与 HTML 内 容 操作 的 区 别 。 


【 例 17.01】 本 实例 将 对 页 面 中 元 素 的 文本 内 容 与 HIML 内 容 进 行 了 


(实例 位 置 : 资源 包 \ 源 码 \17\17.01 ) 


和 E 新 设置 。 


实现 步骤 如 下 : 


(1) 创建 ndex.html 文件 ， 在 该 文件 的 <head> 标 记 中 应 用 下 面 的 语句 引入 jQuery 库 。 


<script type="text/javascript" src="JS/jquery-3.2.1.min.js"></script> 
(2) 在 页 面 的 <body> 标 记 中 ， 添 加 两 个 <div> 标 记 ， 这 两 个 <div> 标 记 除了 id 属性 不 同 外 ， 其 他 均 


相同 ， 关 键 代码 如 下 : 


01 ”应 用 text() 方 法 设置 的 内 容 

02 <divid="div1"> 

03 ”<span id="clock"> 默 认 显示 的 文本 </span> 
04 </div> 

05 ”<br /> 应 用 html() 方 法 设置 的 内 容 

06 <divid="div2"> 

07 ”<span id="clock"> 默 认 显示 的 文本 </span> 
08 </div> 


(3) 在 引入 jQuery 库 的 代码 下 方 编写 jQuery 代码 ， 实 现 为 <div> 标 记 重 新 设置 文本 内 容 和 HTML 


内 容 ， 有 具体 代码 如 下 : 


01 <scripttype="text/javascript"> 
02 S$(document).ready(function(X{ 


03 // 为 <div> 标 记 重新 设置 文本 内 容 

04 $("#div1").text("<span style='color:#FF0000'> 重 新 设置 的 文本 内 容 </span>"); 
05 // 为 <div> 标 记 重 新 设置 HTML 内 容 

06 $("#div2").html("<span style='color:#FF0000'> 重 新 设置 的 HTML 内 容 </span>"); 
07 入 

08 </script> 


运行 本 实例 ， 将 显示 如 图 17.3 所 示 的 运行 结果 。 
在 运行 结果 中 可 以 看 出 ， 在 应 用 text0 方 法 设置 文本 内 
容 时 ， 即 使 内 容 中 包含 HTML 代码 ， 也 将 被 认为 是 普 
通 文本 ， 并 不 能 作为 HTML 代码 被 浏览 器 解析 ， 而 应 
用 html0 方 法 设置 的 HIML 内 容 中 包括 的 HTML 代码 
就 可 以 被 浏览 器 解析 。 


17.1.2 ”对 元 素 值 操作 


eg 站 ENCode\sW16\0l\inc 只 - 上 大 对 元 来 及 窑 法 行 设置 


六 久生 看 (V) 仇 芭 闪 (A)】 工具 [者 动 H) 


应 用 text0 方 法 设置 的 内 容 


<span style='color*FF0000> 重 新 设置 的 文本 内 容 <span> 


应 用 html 方 法 设置 的 内 容 
重新 设置 的 HTML 内 容 


17.3 重新 设置 元 素 的 文本 内 容 与 HIML 内 容 


jQuery 提供 了 3 种 对 元 素 值 操作 的 方法 ， 如 表 17.1 所 示 。 
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方 ” 法 说 明 


val0 一 个 字符 串 ， 也 可 能 是 一 个 数组 。 例 如 ， 当 select 
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表 17.1 对 元 素 的 值 进 行 操作 的 方法 


用 于 获取 第 一 个 匹配 元 素 的 当前 值 , 返回 值 可 能 是 S$("#username").val0: /获取 id 为 usemame 的 元 


素 的 值 


元 素 有 两 个 选中 值 时 ， 返 回 结果 就 是 一 个 数组 


valCvaD) 用 于 设置 所 有 匹配 元 素 的 值 


SCinputtext") val(" 新 值 ) // 为 全 部 文本 框 设置 值 


val(arrVaD) 


用 于 为 checkbox、select 和 radio 等 元 素 设置 值 ， 
参数 为 字符 串 数组 


S$("select").val([' 列 表 项 1',' 列 表 项 2 /为 下 拉 列 
表 框 设置 多 选 值 


【 例 17.02】 ”将 列表 框 中 的 第 一 个 和 第 二 个 列表 项 设置 为 选中 状态 ， 并 获取 该 多 行列 表 框 的 值 。 


实现 步骤 如 下 : ( 实例 位 置 : 资源 包 \ 源 码 \17\17.02 ) 


(1) 创建 mdex.html 文件 ， 在 该 文件 的 <head> 标 记 中 应 用 下 面 的 语句 引入 jQuery 库 。 
<script type="text/javascript" src="JS/jquery-3.2.1.min.js"></script> 
(2) 在 页 面 的 <body> 标 记 中 ， 添 加 一 个 包含 3 个 列表 项 的 可 多 选 的 多 行列 表 框 ， 默认 为 后 两 项 被 


Ph， 代码 如 下 : 


01 <selectname="like" size="3" multiple="multiple" id="like"> 
02 <option> 列 表 项 1</option> 

03 <option selected="selected"> 列 表 项 2</option> 

04 <option selected="selected"> 列 表 项 3</option> 

05 </select> 


(3) 在 引入 jQuery 库 的 代码 下 方 编写 jQuery 代码 ， 应 用 jQuery 的 val(arrVal) 方 法 将 其 第 一 个 和 
-个 列表 项 设置 为 选中 状态 ， 并 应 用 val0 方 法 获取 该 多 行列 表 框 的 值 ， 具 体 代 码 如 下 : 
01 <scripttype="text/javascript"> 
02 S$(document).ready(function(X{ 


03 $("select").val([ 列 表 项 1',' 列 表 项 21); // 设 置 多 行列 表 框 的 值 
04 alert($("select").val()); // 获 取 并 输出 多 行列 表 框 的 值 


图 17.4 获取 到 的 多 行列 表 框 的 值 
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17.2 对 DOM 节点 进行 操作 


了 解 JavaScript 的 读者 应 该 知道 ， 通 过 JavaScript 可 以 实现 对 DOM 节点 的 操作 ， 例 如 查找 节点 、 
创建 节点 、 插 入 节点 、 复 制 节点 或 者 删除 节点 ， 不 过 比较 复杂 。jQuery 为 了 简化 开发 人 员 的 工作 ， 也 
提供 了 对 DOM 节点 进行 操作 的 方法 ， 其 中 ， 查 找 节点 可 以 通过 jQuery 提供 的 选择 器 实现 。 下 面 对 节 
点 的 其 他 操作 进行 详细 介绍 。 


17.2.1 创建 节点 


创建 元 素 节 点 包括 两 个 步 又， 一 是 创建 新 元 素 ， 二 是 将 新 元 素 插入 文档 中 《〈 即 父 元 素 中 )。 例 如 ， 
要 在 文档 的 body 元 素 中 创建 一 个 新 的 段落 节点 可 以 使 用 下 面 的 代码 : 


01 <scripttype="text/javascript"> 


02 $(document).ready(function(){ 

03 /方法 一 

04 var $p=$("<p></p>"); 

05 $p.html("<span style='color:#FF0000'> 方 法 一 添加 的 内 容 </span>"); 

06 $("body").append($p); 

07 /方法 二 

08 var $txtP=$("<p><span style='color:#FF0000'> 方 法 二 添加 的 内 容 </span></p>"); 
09 S$("body").append($txtP); 

10 人 /方法 三 

WU $("body").append("<p><span style='color:#FF0000'> 方 法 三 添加 的 内 容 </span></p>"); 
12 »); 

13 </script> 


NG 
-说 明 
在 创建 节点 时 ,浏览 器 会 将 所 添加 的 内 容 视 为 HTML 内 容 进 行 解释 执行 ,无 论 是 否 是 使 用 html0 
方法 指定 的 HTML 内 容 。 上 面 所 使 用 的 3 种 方法 都 将 在 文档 中 添加 一 个 颜色 为 红色 的 段落 文本 。 


17.2.2 插入 节点 


在 创建 节点 时 ， 应 用 了 append0 方 法 将 定义 的 节点 内 容 插 入 指定 的 元 素 。 实 际 上 ， 该 方法 是 用 于 
插入 节点 的 方法 ， 除 了 append0 方 法 外 ，jQuery 还 提供 了 几 种 插入 节点 的 方法 。 在 jQuery 中 ， 插 入 节 
点 可 以 分 为 在 元 素 内 部 插入 和 在 元 素 外 部 插入 两 种 ， 下 面 分 别 进行 介绍 。 

回 “在 元 素 内 部 插入 

在 元 素 内 部 插入 就 是 向 一 个 元 素 中 添加 子 元 素 和 内 容 。jQuery 提供 了 如 表 17.2 所 示 的 在 元 素 内 部 
插入 的 方法 。 
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表 17.2 在 元 素 内 部 插入 的 方法 


为 所 有 匹配 的 元 素 的 内 部 追加 内 容 


$("#B").append("<p>A</p>"); /向 id 为 
B 的 元 素 中 追加 一 个 段落 
S$(#B").appendTo("#A")，// 将 记 为 B 的 
元 素 追 加 到 id 为 A 的 元 素 后 面 
$("#B").prepend("<p>A</p>"); // 向 id 为 
B 的 元 素 内 容 前 添加 一 个 段落 
$("#B").prependTo("#A"); // 将 id 为 B 的 
元 素 添加 到 id 为 A 的 元 素 前 面 


append(content) 


appendTo(content) | 将 所 有 匹配 的 元 素 添加 到 另 一 个 元 素 的 元 素 集合 中 


prepend(content) | 为 所 有 匹配 的 元 素 的 内 部 前 置 内 容 


将 所 有 匹配 的 元 素 前 置 到 另 一 个 元 素 的 元 素 集合 中 


prependTo(content) 


从 表 17.2 中 可 以 看 出 append() 方 法 与 prepend0 方 法 类 似 ， 所 不 同 的 是 prepend0 方 法 将 添加 的 内 容 
插入 到 原 有 内 容 的 前 面 。 
appendTo0 方 法 实际 上 是 颠倒 了 append0 方 法 ， 例 如 下 面 这 行 代 码 : 


$("<p>A</p>").appendTo("#B"); // 将 指定 内 容 追 加 到 id 为 B 的 元 素 中 
等 同 于 : 
$("#B").append("<p>A</p>"); // 向 id 为 B 的 元 素 中 追加 指定 内 容 


a 
3 说明 
prependO 方 法 是 向 所 有 匹配 元 素 内 部 的 开始 处 插入 内 容 的 最 佳 方法 。prepend(0) 方 法 与 
prependTo0 方 法 的 区 别 同 append0 方 法 与 appendTo() 方 法 的 区 别 。 

回 “在 元 素 外 部 插入 

在 元 素 外 部 插入 就 是 将 要 添加 的 内 容 添 加 到 元 素 之 前 或 元 素 之 后 。jQuery 提供 了 如 表 17.3 所 示 的 
在 元 素 外 部 插入 的 方法 。 
表 17.3 在 元 素 外 部 插入 的 方法 

方 ” 法 说 有明 
after(content) 在 每 个 匹配 的 元 素 之 后 插入 内 容 


insertAfter(content) 将 所 有 匹配 的 元 素 插入 到 另 一 个 指定 元 素 的 元 
素 集合 的 后 面 


示例 
$("#B").after("<p>A</p>"); // 向 id 为 B 的 元 
素 的 后 面 添加 一 个 段落 
$("<p>test</p>").insertAfter("#B"); ”// 将 要 
添加 的 段落 插入 到 id 为 B 的 元 素 的 后 面 
$("#B").before("<p>A</p>"); // 向 id 为 B 的 


before(content) 在 每 个 匹配 的 元 素 之 前 插入 内 容 元 素 前 添加 一 个 段落 
ULUWW| 将 所 有 匹配 的 元 素 插入 到 另 一 个 指定 元 素 的 元 | SC#B") insertBefore( YA /将 这 为 了 的 元 
insertBefore(content) | 素 集合 的 前 面 素 添加 到 id 为 A 的 元 素 前 面 


17.2.3 删除、 复制 与 替换 节点 
在 页 面 上 只 执行 插入 和 移动 元 素 的 操作 是 远 远 不 够 的 ， 在 实际 开发 的 过 程 中 还 经 常 需要 删除 、 复 


279 


JavaScript 从 入 门 到 精通 ( 微 视频 精 编 版 ) 


制 和 蔡 换 相 应 的 元 素 。 下 面 将 介绍 如 何 应 用 jQuery 实现 删除 、 复 制 和 蔡 换 节点 。 
回 ”删除 节点 
jQuery 提供 了 两 种 删除 节点 的 方法 ， 分 别 是 empty0 方 法 和 remove([expr]) 方 法 。 其 中 ，empty0 方 

法 用 于 删除 匹配 的 元 素 集合 中 所 有 的 子 节点 ， 并 不 删除 该 元 素 ;remove([expr]) 方 法 用 于 从 DOM 中 删 

除 所 有 匹配 的 元 素 。 例 如 ， 在 文档 中 存在 下 面 的 内 容 : 


01 div1: 

02 <divid="div1" style="border 1px solid #0000FF; height 26px"> 
03 ”<span> 谁 言 寸 草 心 ， 报 得 三 春晖 </span> 

04 </div> 

05 div2: 

06 <divid="div2" style="border 1px solid #0000FF; height: 26px"> 
07 ”<span> 谁 言 十 草 心 ， 报 得 三 春晖 </span> 

08 </div> 


执行 下 面 的 jQuery 代码 后 ， 将 得 到 如 图 17.5 所 示 的 运行 结果 。 
01 <scripttype="text/javascript"> 


02 S$(document).ready(function(}{ 

03 $("#div1").empty(); // 调 用 empty() 方 法 删除 div1 中 的 所 有 子 节点 
04 S$("#div2").remove(); /调用 remove() 方 法 删除 id 为 div2 的 元 素 
05 »); 

06 </script> 


divli 
div2， 
图 17.5 删除 节点 

回 复制 节点 

jQuery 提供 了 clone0 方 法 用 于 复制 节点 ， 该 方法 有 两 种 形式 ， 一 种 是 不 带 参数 的 形式 ， 用 于 克隆 
匹配 的 DOM 元 素 并 且 选 中 这 些 克 隆 的 副本 ; 另 一 种 是 带 有 一 个 布尔 型 的 参数 ， 当 参数 为 tue 时 ， 表 
示 克 隆 匹 配 的 元 素 及 其 所 有 的 事件 处 理 并 且 选 中 这 些 克隆 的 副本 ， 当 参数 为 false 时 ， 表 示 不 复制 元 素 
的 事件 处 理 。 

例如 ， 在 页 面 中 添加 一 个 按钮 ， 并 为 该 按钮 绑 定 单 击 事件 ， 在 单 击 事件 中 复制 该 按钮 ， 但 不 复制 
它 的 事件 处 理 ， 可 以 使 用 下 面 的 jQuery 代码 : 

01 <scripttype="text/javascript"> 


02 S$(function(){ 

03 S$("input").bind("click",function() { // 为 按钮 绑 定 单 击 事件 

04 $dtthis).clone().insertAfter(this): /复制 自己 但 不 复制 事件 处 理 
05 六 

06 »; 

07 </script> 


运行 上 面 的 代码 ， 当 单 击 页 面 上 的 按钮 时 ， 会 在 该 元 素 之 后 插入 复制 后 的 元 素 副 本 ， 但 是 复制 的 
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按钮 没有 复制 事件 ， 如 果 需 要 同时 复制 元 素 的 事件 处 理 ， 可 用 clone(true) 方 法 代替 。 

加 ”替换 节点 

jQuery 提供 了 两 个 蔡 换 节点 的 方法 ， 分 别 是 replaceAll(selector) 方 法 和 replaceWith(content) 方 法 。 
其 中 ，replaceAll(selector) 方 法 用 于 使 用 匹配 的 元 素 蔡 换 掉 所 有 selector 匹配 到 的 元 素 ，replaceWith 
(content) 方 法 用 于 将 所 有 匹配 的 元 素 蔡 换 成 指定 的 HTML 或 DOM 元素。 这 两 种 方法 的 功能 相同 , 只 是 
两 者 的 表现 形式 不 同 。 

例如 ， 使 用 replaceWith() 方 法 蔡 换 页 面 中 id 为 divl 的 元 素 ， 以 及 使 用 replaceAll(0 方 法 替换 id 为 
div2 的 元 素 可 以 使 用 下 面 的 代码 : 


01 <scripttype="text/javascript"> 


02 S$(document).ready(function() { 

03 // 圭 换 id 为 div1 的 <div> 元 素 

04 $("#div1").replaceWith("<div>replaceWith() 方 法 的 替换 结果 </div>"); 
05 // 蔡 换 id 为 div2 的 <div> 元 素 

06 $("<div>replaceAll() 方 法 的 替换 结果 </div>").replaceAll("#div2"); 

07 »); 

08 </script> 


【 例 17.03】 本 实例 将 应 用 jQuery 提供 的 对 DOM 节点 进行 操作 的 方法 实现 我 的 开心 小 农场 。 
实现 步 又 如 下 :( 实例 位 置 : 资源 包 \ 源 码 \17\17.03 ) 
(1) 创建 index.html 文件 ， 在 该 文件 的 <head> 标 记 中 应 用 下 面 的 语句 引入 jQuery 库 。 
<script type="text/javascript" src="JS/jquery-3.2.1.min.js"></script> 
(2) 在 页 面 的 <body> 标 记 中 ， 添 加 一 个 显示 农场 背景 的 <div> 标 记 ， 并 且 在 该 标记 中 添加 4 个 <span> 
标记 ， 用 于 设置 控制 按钮 ， 代 码 如 下 : 
01 <div id="bg"> 


02 <span id="seed"></span> 
03 <span id="grow"></span> 
04 <span id="bloom"></span> 
05 <span id="fruit"></span> 
06 </div> 


(3) 编写 CSS 代码 ， 控 制 农场 背景 、 控 制 按钮 和 图 片 的 样式 ， 具 体 代码 如 下 : 
01 <styletype="text/css"> 


02 #bg{ "控制 页 面 背 景 */ 
03 width:456px; 

04 height:266px; 

05 background-image:url(images/plowland.jpg); 

06 border:#999 1px solid; 

07 padding:5px; 

08 } 

09 img{ 人 控制 图 片 */ 

10 position:absolute; 

11 top:85px; 
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12 left:195px; 

13 } 

14 #seed{ 让 控制 “播种 ”按钮 */ 
15 background-image:url(images/btn_seed.png); 

16 width:56px; 

R height:56px; 

18 position:absolute; 

19 top:229px; 

20 left:49px; 

21 cursor:pointer; 

22 } 

23 #grow{ /控制 “生长 ”按钮 */ 
24 background-image:url(images/btn_grow.png); 

25 width:56px; 

26 height:56px; 

27 position:absolute; 

28 top:229px; 

29 left:154px; 

30 cursor:pointer; 

31 } 

32 #bloom{ A 控制 “开花 ”按钮 */ 
33 background-image:url(images/btn_bloom.png); 

34 width:56px; 

35 height:56px; 

36 position:absolute; 

rp top:229px; 

38 left:259px; 

39 cursor:pointer; 

40 } 

41 #ruit{ /控制 “结果 ”按钮 */ 
42 background-image:url(images/btn_fruit.png); 

43 width:56px; 

44 height:56px:; 

45 position:absolute; 

46 top:229px; 

47 left:368px; 

48 cursor:pointer; 

49 } 

50 </style> 


(4) 编写 jQuery 代码 ， 分 别 为 “播种 ”“ 生 长 ”““ 开 花 ”“ 结 果 ” 按 钮 绑 定单 击 事件 ， 并 在 其 单 击 
事件 中 应 用 操作 DOM 节点 的 方法 控制 作物 的 生长 ， 具 体 代码 如 下 : 


01 <scripttype="text/javascript"> 
02 S$(document).ready(function(X{ 


03 S$("#seed").bind("click",function(X{ // 绑 定 “ 播 种 ”按钮 的 单 击 事件 
04 S$("img").remove(); // 移 除 img 元 素 

05 $("#bg").prepend("<img src='images/seed.png' />"); 

06 入 
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07 $("#grow").bind("click",function(X{ // 绑 定 “ 生 长 ”按钮 的 单 击 事件 
08 $("img").remove(); // 移 除 img 元 素 

09 $("#bg").append("<img src='images/grow.png' />"); 

10 »); 

11 $("#bloom").bind("click",function(X{ // 绑 定 “开花 ”按钮 的 单 击 事件 
Es $("img").replaceWith("<img src='images/bloom.png' />"); 

13 入 

14 $("#fruit").bind("click",function(X{ // 绑 定 “ 结 果 ” 按 钮 的 单 击 事件 
15 $("<img src='images/fruit.png' />").replaceAll("img"); 

16 中 

i D); 

18 </script> 


运行 本 实例 ， 单 击 “ 播 种 ”按钮 ， 将 显示 如 图 17.6 所 示 的 效果 ; 单 击 “ 生 长 ”按钮 ， 将 显示 如 图 17.7 
所 示 的 效果 ; 单 击 “ 开 花 ” 按 钮 ， 将 显示 如 图 17.8 所 示 的 效果 ; 单 击 “ 结 果 ” 按 钮 ， 将 显示 一 棵 结 满 


果实 的 草 蓉 身 ， 效 果 如 图 17.9 所 示 。 


我 的 开心 小 灾 场 


@ 图 刀 国 | 


17.6 单 击 “ 播 种 ”按钮 的 结果 图 17.7 单 击 “ 生 长 ”按钮 的 结果 


我 的 开心 小 灾 场 a 
4 


17.8 单 击 “开花 ”按钮 的 结果 图 17.9 单 击 “ 结 果 ” 按 钮 的 结果 


17.3 ”对 元 素 属性 进行 操作 


jQuery 提供 了 如 表 17.4 所 示 的 对 元 素 属性 进行 操作 的 方法 。 


[本 二 
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表 17.4 ”对 元 素 属性 进行 操作 的 方法 


方 法 说 明 示例 
获取 匹配 的 第 一 个 元 素 的 属性 值 (无 | SC'img").attr(src); /获取 页 面 中 第 一 个 img 元 素 的 src 
Sm 值 时 返回 undefined) 属性 的 值 
为 所 有 匹配 的 元 素 设置 一 个 属性 值 | Soimgmatt(vtitle" "草莓 正在 生长 /为 图 片 添加 一 
| (value 是 设置 的 值 ) 标题 属性 ， 属 性 值 为 “草莓 正在 生长 ” 


S$("#fn").attr("value"., function0 { 


本 
为 所 有 匹配 的 元 素 设置 一 个 函数 返回 | 。 reum this name: // 将 元 素 的 名 称 作为 其 value 属性 值 


值 的 属性 值 ( 血 代表 函数 ) 

为 所 有 匹配 元 素 以 集合 {名 : 值 ,名 : 
aroperte9 | 值 }) 形式 同时 设置 多 个 属性 
removeAttr(name) | 为 所 有 匹配 元 素 删除 一 个 属性 


在 表 17.4 所 列 的 这 些 方法 中 ，key 和 name 都 代表 元 素 的 属性 名 称 ，properties 代表 一 个 集合 。 

【 例 17.04】 对 复 选 框 最 基本 的 应 用 ， 就 是 对 复 选 框 的 全 选 、 反 选 与 全 不 选 操作 ， 本 实例 实现 定 
义 用 户 注册 页 面 ， 在 该 页 面 中 可 添加 爱好 信息 ， 并 添加 “全 选 %“ 反 选 ”%“ 全 不 选 ”按钮 ， 实 现 复 选 杠 
的 全 选 、 反 选 和 全 不 选 操作 。 实 现 步骤 如 下 : ( 实例 位 置 : 资源 包 \ 源 码 \17\17.04 ) 

(1) 创建 index.html 文件 ， 在 该 文件 的 <head> 标 记 中 应 用 下 面 的 语句 引入 jQuery 库 。 


attr(key.,fn) 


同时 添加 两 个 属性 ， 分 别 是 src 和 title 
$("img").attr({sre:"test.gif".title:" 图 片 示例 "}); 
$("ime").removeAttr("title"): // 移 除 所 有 图 片 的 title 属性 


<script type="text/javascript" src="JS/jquery-3.2.1.min.js"></script> 


(2) 在 页 面 中 定义 表格 ， 为 用 户 提供 注册 信息 表 ， 其 中 包含 由 复 选 框 组 成 的 “爱好 ”列表 ， 所 有 
复 选 框 的 name 属性 值 全 部 为 checkbox， 有 具体 代码 如 下 : 


01 <formname="form1"> 

02 <divalign="center"> 

03 <table width="400" border="1" bgcolor="#FFCCCC"> 

04 <tr height="36"><td colspan="2" class="style1"> 用 户 注 册 信 息 表 </td></tr> 


05 <tr> 

06 <td width="100"><div align="right"> 用 户 名 </div></td> 
07 <td width="267"><div align="left"> 

08 <input type="text" name="textfield"> 

09 <span class="style2">*</span></div></td> 

10 </tr> 

11 <tr> 

12 <td><div align="right"> 密 码 </div></td> 

13 <td><div align="left"> 

14 <input type="password" name="textfield2"> 

15 <span class="style2">*(6-15) 位 </span></div></td> 
16 </tr> 

A <tr> 

18 <td><div align="right"> 确 认 密码 </div></td> 

扒 <td><div align="left"> 

20 <input type="password" name="textfield3"> 

21 <span class="style2">*</span></div></td> 

22 </tr> 
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<tr> 
<td><div align="right"> 性 别 </div></td> 
<td><div align="left"> 
<select name="select"> 
<option> 男 </option> 
<option> 女 </option> 
<option selected>--</option> 
</select> 
</div></td> 
</tr> 
<tr> 
<td height="98"><div align="right"> 爱 好 </div></td> 
<td><div align="left"> 
<p> 
<input type="checkbox" name="checkbox" value="checkbox"> 
网 


<input type="checkbox" name="checkbox" value="checkbox"> 
旅游 
<input type="checkbox" name="checkbox" value="checkbox"> 
交友 
<input type="checkbox" name="checkbox" value="checkbox"> 
有 逛街 </p> 
<p> 
<input type="checkbox" name="checkbox" value="checkbox"> 
看 书 
<input type="checkbox" name="checkbox" value="checkbox"> 
书法 
<input type="checkbox" name="checkbox" value="checkbox"> 
游戏 
<input type="checkbox" name="checkbox" value="checkbox"> 
球 类 </p> 
<p align="right"> 
<input type="button" name="Submit" id="checkAll" value=" 全 选 "> 
<input type="button" name="Submit2" id="inverse" value=" 反 选 "> 
<input type="button" name="Submit3" id="checkNo" value=" 全 不 选 "> 


</p> 
</div></td> 
</tr> 
<tr> 


<td><div align="right"> 邮 箱 </div></td> 
<td><div align="left"> 
<input type="text" name="textfield4"> 
</div></td> 
</tr> 
<tr> 
<td colspan="2"><div align="center"> 
<input type="button" name="Submit3" value=" 按 钮 " > 
<input type="reset" name="Submit4" value=" 重 置 "> 
</div></td> 
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72 </tr> 

73 </table> 

74 <p align="left" class="style1">&nbsp;</p> 
75 </div> 

76 </form> 


(3) 在 页 面 中 编写 jQuery 代码 ， 判 断 用 户 是 否 单 击 了 “全 选 ”“ 反 选 ” 或 “全 不 选 ”按钮 ， 并 给 
出 相应 的 操作 ， 具 体 代 码 如 下 : 


01 <scripttype="text/javascript"> 
02 S$(function(X{ 


03 S$("#checkAIl").click(function(){ // 判 断 用 户 是 否 单 击 了 “全 选 ”按钮 
04 $([name = checkbox]:checkbox').prop('checked',true); // 将 全 部 复 选 框 设 为 选中 状态 

05 »); 

06 $("#inverse").click(function(X // 判 断 用 户 是 否 单 击 了 “反选 ”按钮 
07 $([name = checkbox]:checkbox'").each(function(){ ”// 每 个 复 选 框 都 进行 判断 

08 if($(this).prop('checked')\{ // 如 果 复 选 框 为 选中 状态 

09 S$(this).prop('checked'false); // 将 复 选 框 设 为 不 选中 状态 

10 Jelse{ 

11 S$(this).prop('checked',true); // 将 复 选 框 设 为 选中 状态 

12 } 

13 入 

14 »); 

15 S$("#checkNo").click(function(X{ // 判 断 用 户 是 否 单 击 了 “全 不 选 ”按钮 
16 $('[name = checkbox]:checkbox').prop('checked',false); // 将 全 部 复 选 框 设 为 不 选中 状态 

he 六 

180 ); 

19 </script> 


运行 实例 ， 结 果 如 图 17.10 所 示 。 


Os ENcodevToAl5V2lVn P 局 上 居 实现 复生 和 0 全 渤 、. 
文件 四。 交响 查看 收 二 A) 工具 0D 


用 户 注册 信息 表 
用 户 知 |byy 总 


性 别 | 郧 ~ | 


口上 网 网 旅游 口交 友 团 表 街 
要 好 | 加 看 书 口 法 口 江口 球 类 
全 选 ]| 反选 ]| 全 不 先 


邮箱 [byy@byy com 


按钮 || 重 置 Y 


图 17.10 复 选 框 的 全 选 、 反 选 和 全 不 选 操作 
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17.4 ”对 元 素 的 CSS 样式 进行 操作 


在 jQuery 中 ， 对 元 素 的 CSS 样式 操作 可 以 通过 修改 CSS 类 或 者 CSS 的 属性 来 实现 。 下 面 进行 详 
细 介 绍 。 


17.4.1 通过 修改 CSS 类 实现 


在 网 页 中 ， 如 果 想 改变 一 个 元 素 的 整体 效果 〔 例 如， 在 实现 网 站 换 肤 时 )， 可 以 通过 修改 该 元 素 所 
使 用 的 CSS 类 来 实现 。 在 jQuery 中 ， 提 供 了 如 表 17.5 所 示 的 几 种 用 于 修改 CSS 类 的 方法 。 


表 17.5 修改 CSS 类 的 方法 


方 ” 法 说 明 示例 
Se $("div").addClass("blue line"); /为 全 部 div 元 素 添 
addClass(class) 为 所 有 匹配 的 元 素 添加 指定 的 CSS 类 名 加 blue 和 line 两 个 CSS 类 
ee 从 所 有 匹配 的 元 素 中 删除 全 部 或 者 指定 | $("div").removeClass("line"): /删除 全 部 div 元 素 中 
sais 的 CSS 类 名 称 为 line 的 CSS 类 
S$(div")toggleClass("yellow");/ 当 div 元 素 中 存 
Fk S 一 个 
toggleClass(class) Rd di 在 名 称 为 yellow 的 CSS 类 时 ， 则 删除 该 类 ， 否则 添 
CSS 类 》 
加 该 类 
如 果 switch 参 数 为 tme 则 添加 对 应 的 CSS | SCimg )toggleClass( show "true); /为 img 元 素 汪 
togaleClasstclass's | 关 ， 理 则 就 删除 ， 通 常 switeh 参数 为 一 | 加 CSS 类 show 
witch) $("img").toggleClass("show",false);”// 为 img 元 素 删 


个 布尔 型 的 变量 


除 CSS 类 show 


Poa 
C6 培 明 
在 使 用 addClass() 方 法 添加 CSS 类 时 ， 并 不 会 删除 现 有 的 CSS 类 。 同 时 ， 在 使 用 表 17.5 所 列 
的 方法 时 ， 其 class 参数 都 可 以 设置 多 个 类 名 ， 类 名 与 类 名 之 间 用 空格 分 隔 。 


17.4.2 ”通过 修改 CSS 属性 实现 


如 果 需 要 获取 或 修改 某 个 元 素 的 具体 样式 〈 即 修改 元 素 的 style 属性 )，jQuery 也 提供 了 相应 的 方 
法 ， 如 表 17.6 所 示 。 
表 17.6 获取 或 修改 CSS 属性 的 方法 
方法 说 明 示例 


- S$("div").css("color): /获取 第 一 个 匹配 的 div 元素 
| 9 
css(name) 返回 第 一 个 匹配 元 素 的 样式 属性 的 color 属性 值 
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方 ” 法 说 明 


为 所 有 匹配 元 素 的 指定 样式 设置 值 


示例 
$("img").css("border"."lpx solid #000000"); /为 全 部 
img 元 素 设置 边框 样式 
S$("tr").css({ 


css(name.value) 


. "background-color":"#0A65F3",// 设 置 背 景 颜 色 
css(properties) 以 {局 性 : 值 ,属性 : 值 …} 的 形式 为 所 有 匹配 "font-size":"14px", /设置 字体 大 小 
的 元 素 设置 样式 属性 "color":"#FFFFFF" // 设 置 字 体 颜 色 


人 
2 明 
在 使 用 css() 方 法 设置 属性 时 ， 既 可 以 解释 连 字符 形式 的 CSS 表示 法 (如 background-color ) ， 
也 可 以 解释 大 小 写 形式 的 DOM 表示 法 (如 backgroundColor ) 。 


17T3， 学 战 


17.5.1 判断 两 次 输入 密码 是 否 一 臻 


在 用 户 注册 表单 中 ， 应 用 val0 方 法 判断 用 户 两 次 输入 的 密码 是 否 一 致 ， 运 行 结果 如 图 17.11 所 示 。 
(实例 位 置 : 资源 包 \ 源 码 \17\ 实 战 \01 ) 


图 17.11 判断 用 户 两 次 输入 的 密码 是 否 一 至 
17.5.2 ”通过 下 拉 菜 单 选择 头像 


模拟 聊天 系统 中 选择 头像 的 功能 , 通过 下 拉 菜 单 选择 头像 ， 运行 结果 如 图 17.12 所 示 。( 实例 位 置 : 
资源 包 \ 源 码 \17\ 实 战 \02 ) 
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[=o[ 刁 -| 区 
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图 17.12 通过 下 拉 菜 单 选择 头像 
17.5.3 ”模拟 点 歌 系统 的 歌曲 置顶 和 删除 功能 
模拟 点 歌 系统 的 歌曲 置顶 和 删除 的 功能 ， 单 击 歌 曲名 称 右 侧 的 “置顶 ”按钮 置顶 该 歌曲 ， 单 击 歌 


曲名 称 右 侧 的 “删除 ”按钮 删除 该 歌曲 ， 运 行 结 果 如 图 17.13 所 示 。( 实例 位 置 : 资源 包 \ 源 码 \17\ 实 
战 \03 ) 


图 17.13 歌曲 置顶 和 删除 


17.6 小 结 


本 章 主要 介绍 了 jQuery 控制 页 面 元 素 的 方法 ,包括 对 页 面 元 素 的 值 进 行 操作 、 对 元 素 的 属性 和 CSS 
样式 进行 操作 ， 以 及 对 DOM 节点 进行 操作 ， 通 过 本 章 的 学 习 可 以 在 页 面 中 实现 一 些 简单 的 动态 效果 。 


*/ Os 


虽然 在 传统 的 JavaScript 中 内 置 了 一 些 事件 响应 的 方式 ， 但 是 jQuery 增强 、 
优化 并 扩展 了 基本 的 事件 处 理 机 制 。 本 章 将 对 jQuery 的 事件 处 理 进 行 介绍 。 

通过 学 习 本 章 ， 读 者 主要 事 担 以 下 内 容 : 

MW jQuery 中 有 哪些 事件 

Nm jQuery 中 的 事件 绑 定 

MW 两 种 模拟 用 户 操作 的 方法 


jQuery 事件 处 理 
( 名 ' 视频 讲解 : 14 分 钟 ) 
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18.1 页 面 加 载 响 应 事件 


$(document).ready0 方 法 是 事件 模块 中 最 重要 的 一 个 函数 ， 它 极 大 地 提高 了 Web 响应 速度 。 
$(document) 是 获取 整个 文档 对 象 ， 从 这 个 方法 名 称 来 理解 ， 就 是 获取 文档 就 绪 的 时 候 。 方 法 的 书写 格 
式 为 : 


$(document).ready(function(){ 
// 在 这 里 写 代码 


D); 
可 以 简写 成 : 


$().ready(function(}{ 
// 在 这 里 写 代码 


D); 
当 $0O 不 带 参数 时 ， 默 认 的 参数 就 是 document， 所 以 $0 是 $(document) 的 简写 形式 。 
还 可 以 进一步 简写 成 : 


S$(function(X{ 
// 在 这 里 写 代码 
); 


虽然 语法 可 以 更 短 一 些 ， 但 是 不 提倡 使 用 简写 的 方式 ， 因 为 较 长 的 代码 更 具 可 读 性 ， 也 可 以 防止 
与 其 他 方法 混淆 。 


18.2 jQuery 中 的 事件 


只 有 页 面 加 载 显然 是 不 够 的 ， 程 序 在 其 他 的 时 候 也 需要 完成 某 个 任务 。 例 如 鼠标 单 
事件 、 敲 击 键盘 (onkeypress) 事件 以 及 失去 焦点 (onblur) 事件 等 。 在 不 同 的 浏览 器 中 事件 名 称 是 不 
同 的 ， 例 如 在 正 中 的 事件 名 称 大 部 分 都 含有 on， 如 onkeypress0 事 件 ， 但 是 在 火狐 浏览 器 中 却 没有 这 
个 事件 名 称 ， 而 jQuery 统一 了 所 有 事件 的 名 称 。jQuery 中 的 事件 如 表 18.1 所 示 。 


表 18.1 jQuery 中 的 事件 


方法 说 了 明 
bhur0 触发 元 素 的 blur 事件 
blur(fin 在 每 一 个 匹配 元 素 的 blur 事件 中 绑 定 一 个 处 理 函 数 ， 在 元 素 失去 焦点 时 触发 
changeO 触发 元 素 的 change 事件 
change(fh) 在 每 一 个 匹配 元 素 的 change 事件 中 绑 定 一 个 处 理 函数 , 在 元 素 的 值 改 变 并 失去 焦点 时 


触发 
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续 表 
方 ” 法 说 明 

clickO 触发 元 素 的 chick 事件 
click(fn) 在 每 一 个 匹配 元 素 的 click 事件 中 绑 定 一 个 处 理 函 数 ， 在 元 素 上 单 击 时 触发 
dblclick0 触发 元 素 的 dblclick 事件 
dblclick(fn) 在 每 一 个 匹配 元 素 的 dblclick 事件 中 绑 定 一 个 处 理 函 数 ， 在 元 素 上 双击 时 触发 
error() 触发 元 素 的 error 事件 
error(fn) 在 每 一 个 匹配 元 素 的 error 事件 中 绑 定 一 个 处 理 函数 ， 当 JavaScript 发 生 错误 时 触发 
focus0 触发 元 素 的 focus 事件 
focus(fn) 在 每 一 个 匹配 元 素 的 focus 事件 中 绑 定 一 个 处 理 函数 ， 当 匹配 的 元 素 获 得 焦点 时 触发 
keydown0 触发 元 素 的 keydown 事件 
keydown(fn) 在 每 一 个 匹配 元 素 的 keydown 事件 中 绑 定 一 个 处 理 函数 ， 当 键盘 按 下 时 触发 
keyup0 触发 元 素 的 keyup 事件 
keyup(fn) 在 每 一 个 匹配 元 素 的 keyup 事件 中 绑 定 一 个 处 理 函 数 ， 在 按键 释放 时 触发 
keypress0) 触发 元 素 的 keypress 事件 
keypress(fn) 在 每 一 个 匹配 元 素 的 keypress 事件 中 绑 定 一 个 处 理 函 数 ， 按 下 并 抬 起 按键 时 触发 

在 每 一 个 匹配 元 素 的 load 事件 中 绑 定 一 个 处 理 函 数 , 匹配 的 元 素 内容 完 全 加 载 完毕 后 
load(fn) 触发 
mousedown(fh) 在 每 一 个 匹配 元 素 的 mousedown 事件 中 绑 定 一 个 处 理 函 数 , 在 元 素 上 按 下 鼠标 时 触发 
mousemove(fh) 在 每 一 个 匹配 元 素 的 mousemove 事件 中 绑 定 一 个 处 理 函 数 , 鼠标 在 元 素 上 移动 时 触发 
mouseout(fn) 在 每 一 个 匹配 元 素 的 mouseout 事件 中 绑 定 一 个 处 理 函 数 ， 鼠 标 从 元 素 上 离开 时 触发 
mouseover(fn) 在 每 一 个 匹配 元 素 的 mouseover 事件 中 绑 定 一 个 处 理 函 数 ， 鼠 标 移入 元 素 时 触发 

在 每 一 个 匹配 元 素 的 mouseup 事件 中 绑 定 一 个 处 理 函 数 ， 鼠 标 在 元 素 上 按 下 并 松 开 时 
mouseup(fn) 触发 
resize(fn) 在 每 一 个 匹配 元 素 的 resize 事件 中 绑 定 一 个 处 理 函数 ， 当 文档 窗口 改变 大 小 时 触发 
scroll(fn) 在 每 一 个 匹配 元 素 的 scroll 事件 中 绑 定 一 个 处 理 函 数 ， 当 滚动 条 发 生变 化 时 触发 
selectO 触发 元 素 的 select 事件 
select(fn) 在 每 一 个 匹配 元 素 的 select 事件 中 绑 定 一 个 处 理 函数 ， 在 元 素 上 选中 某 段 文本 时 触发 
submitO 触发 元 素 的 submit 事件 
submit(fn) 在 每 一 个 匹配 元 素 的 submit 事件 中 绑 定 一 个 处 理 函数 ， 在 表单 提交 时 触发 
unload(fn) 在 每 一 个 匹配 元 素 的 unload 事件 中 绑 定 一 个 处 理 函 数 ， 在 元 素 卸 载 时 触发 


这 些 都 是 对 应 的 jQuery 事件 ， 和 传统 的 JavaScript 中 的 事件 几乎 相同 ， 只 是 名 称 不 同 。 方 法 中 的 
血 参数 表示 一 个 函数 ， 事 件 处 理 程序 就 写 在 这 个 函数 中 。 
【 例 18.01】 应 用 jQuery 中 的 mouseover 事件 和 mouseout 事件 实现 横向 导航 菜单 的 功能 。 实 现 
步 又 如 下 : (实例 位 置 : 资源 包 \ 源 码 \18\18.01 ) 
(1) 创建 index.html 文件 ， 在 该 文件 的 <head> 标 记 中 应 用 下 面 的 语句 引入 jQuery 库 。 


<script type="text/javascript" src="JS/jquery-3.3.1.min.js"></script> 
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(2) 在 文件 中 创建 一 个 表格 ， 在 表格 中 完成 横向 主 菜单 和 相应 子 菜单 的 创建 ， 关 键 代 码 如 下 : 


<table width="400" border="0" align="center" cellpadding="0" cellspacing="0" style="font-size:15px"> 


<tr> 
<td width="20%"> 
<div align="center" id="Tdiv_1" class="menubar> 
<div class="header"> 教 育 网 站 </div> 
<div align="left" id="Div1" class="menu"> 
<a href="#'> 重 庆 XX 大 学 </a><br> 
<a href="#"> 长 春 XX 大 学 </a><br> 
<a href="#'> 吉 林 XX 大 学 </a> 
</div> 
</div> 
</td> 
<td width="20%"> 
<div align="center" id="Tdiv_2" class="menubar"> 
<div class="header"> 电 脑 从 书 网 站 </div> 
<div align="left" id="Div2" class="menu"> 


<a href="#">PHP 图 书 </a><br> 
<a href="#">JScript 图 书 </a><br> 
<a href="#">Java 图 书 </a> 
</div> 
</div> 
</td> 


<td width="20%"> 
<div align="center" id="Tdiv_3" class="menubar"> 
<div class="header"> 新 出 图 书 </div> 
<div align="left" id="Div3" class="menu"> 
<a href="#">Delphi 图 书 </a><br> 


<a href="#">VB 图 书 </a><br> 
<a href="#">Java 图 书 </a> 
</div> 
</div> 
</td> 


<td width="20%"> 
<div align="center" id="Tdiv_4" class="menubar"> 
<div class="header"> 其 它 网 站 </div> 
<div align="left" id="Div4" class="menu"> 


<a href="#"> 明 日 科技 </a><br> 
<a href="#"> 阴 日 图 书 网 </a><br> 
<a href="#"> 技 术 支 持 网 </a> 
</div> 
</div> 
</td> 
</tr> 
</table> 
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(3) 编写 CSS 样式 ， 用 于 控制 横向 导航 菜单 的 显示 样式 ， 具 体 代 码 如 下 : 


01 <style type="text/css"> 
02 .menubar{ 

03 position:absolute; 

04 top:10px; 

05 width:100px; 

06 height:20px; 

07 line-height:20px; 

08 cursor:default; 

09 border-width:1px; 

10 border-style:outset; 
11 color:#99FFFF; 

12 background:#669900 


13 } 
14 .menut{top:32px; 
15 width:90px; 


16 display:none; 

17 border-width:2px; 

18 border-style:outset; 
19 border-colorwhite sliver sliver white; 
20 background:#333399; 
21 padding:5px 

22 )} 

23 .menu af 

24 text-decoration:none; 
25 color:#99FFFF; 

26 } 

27 .menu a:hover{ 

28 color: 证 FFFFF; 

29 } 

30 </style> 


(4) 编写 jQuery 代码 ， 通 过 mouseover 事件 显示 当前 主 菜单 下 的 子 菜单 ， 并 通过 mouseout 事件 


将 所 有 子 菜单 隐藏 ， 具 体 代码 如 下 : 


如 ， 
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01 <scripttype="text/javascript"> 
02 S$(document).ready(function(X{ 


03 S$(".menubar").mouseover(function(}{ // 当 鼠标 移 到 元 素 上 时 
04 S$(this) .find(".menu").show(); /显示 当前 的 子 菜单 
05 )).mouseout(function(){ // 当 鼠标 移出 元 素 时 
06 S$(this).find(".menu").hide(); // 将 该 子 菜单 隐藏 

07 六 

08 0)»); 

09 </script> 


运行 本 实例 ， 效 果 如 图 18.1 所 示 。 当 把 鼠标 指向 某 个 主 菜单 时 ， 将 展开 该 主 菜单 下 的 子 菜单 ， 例 
把 鼠标 指向 “电脑 丛书 网 站 ” 主 菜 单 ， 将 显示 该 主 菜单 下 的 子 菜 单 ， 如 图 18.2 所 示 。 
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图 18.1 未 展开 任何 菜单 的 效果 


18.3 事件 绑 定 


| 
| 
. 

在 页 面 加 载 完毕 时 ， 程 序 可 以 通过 为 元 素 绑 定 事件 完成 相应 的 操作 。 在 jQuery 中 ， 事 件 绑 定 
可 以 分 为 为 元 素 绑 定 事件 、 移 除 绑 定 和 绑 定 一 次 性 事件 处 理 3 种 情况 ， 下 面 分 别 进行 介绍 。 
18.3.1 为 元 素 绑 定 事件 

在 jQuery 中 ， 为 元 素 绑 定 事件 可 以 使 用 bind0 方 法 。 

语法 如 下 : 

bind(type,[data],fn) 

参数 说 明 。 

回 type: 事件 类 型 ， 就 是 表 18.1 (jQuery 中 的 事件 ) 中 所 列 的 事件 。 

回 data: 可 选 参数 ， 作 为 event.data 属性 值 传递 给 事件 对 象 的 额外 数据 对 象 。 大 多 数 的 情况 下 不 

使 用 该 参数 。 


回血 ; 绑 定 的 事件 处 理 程序 。 
例如 ， 为 普通 按钮 绑 定 一 个 单 击 事件 ， 在 单 击 该 按钮 时 弹出 一 个 对 话 框 ， 可 以 使 用 下 面 的 代码 


$("input:button").bind("click",function(Xalert(' 您 单 击 了 按钮 ");}); /为 普通 按钮 绑 定单 击 事件 


18.3.2” 移 除 绑 定 
在 jQuery 中 ， 为 元 素 移 除 绑 定 事件 可 以 使 用 unbind0 方 法 。 
语法 如 下 : 
unbind([type],[data]) 


参数 说 明 。 
回 type: 可 选 参数 ， 用 于 指定 事件 类 型 。 
回 data: 可 选 参数 ， 用 于 指定 要 从 每 个 匹配 元 素 的 事件 中 反 绑 定 的 事件 处 理 函 数 。 
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4 
CO 培 明 
在 unbind0 方 法 中 ， 两 个 参数 都 是 可 选 的 ， 如 果 不 填 参数 ， 将 会 删除 匹配 元 素 上 所 有 绑 定 的 事件 。 
例如 ， 要 移 除 为 普通 按钮 绑 定 的 单 击 事件 ， 可 以 使 用 下 面 的 代码 : 
S$("input:button").unbind("click"); // 移 除 为 普通 按钮 绑 定 的 单 击 事件 


18.3.3 ” 绑 定 一 次 性 事件 处 理 


在 jQuery 中 ， 为 元 素 绑 定 一 次 性 事件 处 理 可 以 使 用 one() 方 法 。 
语法 如 下 : 


one(type,[datal,fin) 


参数 说 明 。 

回 type: 用 于 指定 事件 类 型 。 

回 data: 可 选 参数 ， 作 为 event.data 属性 值 传递 给 事件 对 象 的 额外 数据 对 象 。 

回血 ; 绑 定 到 每 个 匹配 元 素 的 事件 上 面 的 处 理 函 数 。 

例如 ， 要 实现 只 有 当 用 户 第 一 次 单 击 匹 配 的 div 元 素 时 ， 弹 出 对 话 框 显示 div 元 素 的 内 容 ， 可 以 使 
用 下 面 的 代码 : 


01 $("div").one("click", function(X 
02 alert($(this).text()); // 在 弹出 的 对 话 框 中 显示 div 元 素 的 内 容 
03 }); 


18.4 模拟 用 户 操作 


中 
在 jQuery 中 提供 了 模拟 用 户 的 操作 触发 事件 和 模仿 悬 停 事件 两 种 模拟 用 户 操作 的 方法 ， 下 面 分 别 
进行 介绍 。 


18.4.1 模拟 用 户 的 操作 触发 事件 


在 jQuery 中 一 般 常 用 triggerHandler0 和 trigger0 方 法 来 模拟 用 户 的 操作 触发 事件 .这 两 个 方法 的 语 
法 格式 完全 相同 , 所 不 同 的 是 : triggerHandler0 方 法 不 会 导致 浏览 器 同名 的 默认 行为 被 执行 , 而 triggerO0 
会 导致 浏览 器 同名 的 默认 行为 的 执行 ， 例 如 使 用 trigger0 方 法 触发 一 个 名 称 为 submit 的 事件 ， 同 样 会 
导致 浏览 器 执行 提交 表单 的 操作 。 要 阻止 浏览 器 的 默认 行为 ， 只 需 返 回 false。 另 外 ， 使 用 trigger0 方 法 
和 triggerHandler() 方 法 还 可 以 触发 bind0 绑 定 的 事件 ， 并 且 还 可 以 为 事件 传递 参数 。 
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【 例 18.02】 在 页 面 载 入 完成 就 执行 按钮 的 click 事件 ， 而 不 需要 用 户 自己 执行 单 击 的 操作 。 关 
键 代码 如 下 : ( 实例 位 置 : 资源 包 \ 源 码 \18\18.02 ) 


01 <scripttype="text/javascript"> 
02 $(document).ready(function(X{ 


03 S$("input:button").bind("click",function(event,msg1,msg2X{ 

04 alert(msg1+msg2); // 弹 出 对 话 框 

05 trigger("click",[" 欢 迎 访 问 "," 明 日 科技 "]); // 页 面 加 载 触发 单 击 事件 
06 }»); 

07 </script> 


08 ”<input type="button" name="button" id="button" value=" 普 通 按钮 " /> 
运行 实例 ， 结 果 如 图 18.3 所 示 。 
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18.3 ”页 面 加 载 时 触发 按钮 的 单 击 事件 


18.4.2 ”模仿 悬 停 事件 


模仿 悬 停 事件 是 指 模仿 鼠标 移动 到 一 个 对 象 上 面 又 从 该 对 象 上 面 移 出 的 事件 ， 可 以 通过 jQuery 提 
供 的 hover(over,out) 方 法 实现 。 

语法 如 下 : 

hover(over,out) 


参数 说 明 。 

回 over: 用 于 指定 当 鼠 标 移动 到 匹配 元 素 上 时 触发 的 函数 。 

回 out: 用 于 指定 当 鼠 标 移 出 匹配 元 素 上 时 触发 的 函数 。 

【 例 18.03】 本 实例 将 实现 当 鼠 标 指向 图 片 时 为 图 片 加 边框 ， 当 鼠标 移出 图 片 时 去 除 图 片 边框 。 

关键 代码 如 下 :( 实例 位 置 : 资源 包 \ 源 码 \18\18.03 ) 

01 <scripttype="textjavascript"> 

02 $(document).ready(function() { 

03 S$("#pic").hover(function(X{ 

04 S$(this).attr("border",1); // 为 图 片 加 边框 
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05 ,function(X{ 


06 S$(this).attr("border",0); /去 除 图 片 边框 
07 »); 

08 »); 

09 </script> 


10 <img id="pic" src="images/mr.gif /> 


运行 本 实例 ， 效 果 如 图 18.4 所 示 。 当 鼠标 指向 图 片 时 的 效果 如 图 18.5 所 示 。 
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图 18.4 页 面 初始 效果 图 18.5 鼠标 指向 图 片 时 的 效果 


18.5 实 战 


18.5.1 验证 用 户 注册 信息 


设计 一 个 简单 的 用 户 注册 页 面 ， 应 用 trigger() 方 法 模拟 用 户 操作 ， 实 现 对 用 户 注册 信息 的 验证 。 当 
用 户 输入 正确 或 错误 时 ， 在 右 侧 会 给 出 相应 的 提示 信息 ， 运 行 结果 如 图 18.6 所 示 。( 实例 位 置 : 资源 
包 \ 源 码 \18\ 实 战 \01 ) 
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用 户 注册 
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图 18.6 验证 用 户 注册 信息 


18.5.2 ”为 文本 框 添加 样式 


在 页 面 中 添加 一 个 用 户 登 录 表单 ， 当 鼠标 指向 文本 框 时 为 文本 框 添加 样式 ， 当 鼠标 移出 文本 框 时 
使 其 恢复 为 原来 的 样式 ， 运 行 结果 如 图 18.7 所 示 。( 实例 位 置 : 资源 包 \ 源 码 \18\ 实 战 \02 ) 
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图 18.7 为 文本 框 添加 样式 


18.5.3 ”实现 滑动 门 的 效果 


通过 隐藏 和 显示 不 同 的 内 容 实现 滑动 门 的 效果 。 应 用 这 种 技术 实现 影视 网 中 热 播 电影 和 经 典 电 影 
之 间 的 切换 ， 运 行 结果 如 图 18.8 和 图 18.9 所 示 。( 实例 位 置 : 资源 包 \ 源 码 \18\ 实 战 \03 ) 
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图 18.8 显示 热 播 电影 图 18.9 显示 经 典 电影 
18.6 小 结 


本 章 主 要 介绍 了 jQuery 中 的 事件 处 理 ， 包 括 对 页 面 元 素 进行 事件 绑 定 和 模拟 用 户 操作 的 方法 ， 通 
过 本 章 的 学 习 可 以 实现 一 些 用户 与 页 面 之 间 的 交互 。 


到 
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第 章 
jQuery 动画 效果 
( 咒 视频 讲解 : 26 分 钟 ) 


应 用 jQuery 可 以 实现 丰富 的 动画 特效， 通过 jQuery 的 动画 方法 ， 可 以 轻松 地 
为 网 页 添加 动态 效果 ， 给 用 户 全 新 的 体验 。 本 章 将 详细 介绍 jQuery 的 几 种 常见 的 
动画 效果 。 

通过 学 习 本 章 ， 读 者 主要 襄 担 以 下 内 容 

MW ”实现 元 素 的 隐藏 和 显示 

MW 实现 淡 入 、 淡 出 的 动画 效果 

MH ”实现 元 素 的 滑动 效果 

”实现 自 定义 的 动画 效果 
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19.1 基本 的 动画 效果 


基本 的 动画 效果 指 的 就 是 元 素 的 隐藏 和 显示 。 在 jQuery 中 提供 了 两 种 控制 元 素 隐藏 和 显示 的 方法 ， 
一 种 是 分 别 隐藏 和 显示 匹配 元 素 ， 另 一 种 是 切换 元 素 的 可 见 状态 ， 也 就 是 如 果 元 素 是 可 见 的 ， 切 换 为 
隐藏 ， 如 果 元 素 是 隐藏 的 ， 切 换 为 可 见 。 


19.1.1 隐藏 匹配 元 素 
使 用 hide0 方 法 可 以 隐藏 匹配 的 元 素 。bide0 方 法 相当 于 将 元 素 CSS 样式 属性 display 的 值 设置 为 


none， 它 会 记 住 原来 的 display 的 值 。hide0 方 法 有 两 种 语法 格式 ,一 种 是 不 带 参数 的 形式 ， 用 于 实现 不 
带 任 何 效果 的 隐藏 匹配 元 素 ， 其 语法 格式 如 下 : 


hide() 
例如 ， 要 隐藏 页 面 中 的 全 部 图 片 ， 可 以 使 用 下 面 的 代码 : 
S$("img").hide(); // 隐 藏 全 部 图 片 


另 一 种 是 带 参数 的 形式 ， 用 于 以 优雅 的 动画 隐藏 所 有 匹配 的 元 素 ， 并 在 隐藏 完成 后 可 选 地 触发 一 
个 回调 函数 ， 其 语法 格式 如 下 : 
hide(speed,[callback]) 


参数 说 明 。 

回 speed: 用 于 指定 动画 的 时 长 。 可 以 是 数字 ， 也 就 是 元 素 经 过 多 少 毫秒 (1000 毫秒 =1 秒 ) 后 
完全 隐藏 。 也 可 以 是 默认 参数 slow 〈600 毫秒 )、normal (400 毫秒 ) 和 fast (200 毫秒 )。 

回 callback: 可 选 参数 ， 用 于 指定 隐藏 完成 后 要 触发 的 回调 函数 。 

例如 ， 要 在 300 毫秒 内 隐藏 页 面 中 的 id 为 ad 的 元 素 ， 可 以 使 用 下 面 的 代码 : 

S$("#ad").hide(300); // 在 300 毫秒 内 隐藏 id 为 ad 的 元 素 


加 


19.1.2 显示 匹配 元 素 


使 用 show0 方 法 可 以 显示 匹配 的 元 素 。 show0 方 法 相当 于 将 元 素 CSS 样式 属性 display 的 值 设置 为 
block 或 inline 或 除了 none 以 外 的 值 ， 它 会 恢复 为 应 用 display:none 之 前 的 可 见 属性 。show0 方 法 有 两 
种 语法 格式 ， 一 种 是 不 带 参数 的 形式 ， 用 于 实现 不 带 任何 效果 的 显示 匹配 元 素 ， 其 语法 格式 如 下 : 


show() 
例如 ， 要 显示 页 面 中 的 全 部 图 片 ， 可 以 使 用 下 面 的 代码 : 
$("img").show(); // 显 示 全 部 图 片 
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另 一 种 是 带 参数 的 形式 ， 用 于 以 优雅 的 动画 显示 所 有 匹配 的 元 素 ， 并 在 显示 完成 后 可 选择 地 触发 
一 个 回调 函数 ， 其 语法 格式 如 下 : 


show(speed,[callback]) 


参数 说 明 。 

回 speed: 用 于 指定 动画 的 时 长 。 可 以 是 数字 ， 也 就 是 元 素 经 过 多 少 毫秒 〈1000 毫秒 =1 秒 ) 后 
完全 显示 ， 也 可 以 是 默认 参数 slow 〈600 毫秒 )、normal (400 毫秒 ) 和 fast (200 毫秒 )。 

回 callback:， 可 选 参数 ， 用 于 指定 显示 完成 后 要 触发 的 回调 函数 。 

例如 ， 要 在 300 毫秒 内 显示 页 面 中 的 id 为 ad 的 元 素 ， 可 以 使 用 下 面 的 代码 : 

$("#ad").show(300); /在 300 毫秒 内 显示 id 为 ad 的 元 素 


SC 纺 曙 
jQuery 的 任何 动画 效果 ， 都 可 以 使 用 默认 的 3 个 参数 ， 即 slow ( 600 毫秒 ) 、normal ( 400 毫 
秒 ) 和 fast (200 毫秒 ) 。 在 使 用 默认 参数 时 需要 加 引号 ， 例 如 show("fast"); 使 用 自 定义 参数 时 ， 
不 需要 加 引号 ， 例 如 show(300)。 


时 能 自动 隐藏， 保持 页 面 的 整洁 。 本 实例 将 介绍 如 何 通 过 jQuery 实现 自动 隐藏 式 菜单 。 实 现 步 又 如 下 : 
(实例 位 置 : 资源 包 \ 源 码 \19\19.01 ) 
(1) 创建 index.html 文件 ， 在 该 文件 的 <head> 标 记 中 应 用 下 面 的 语句 引入 jQuery 库 。 
<script type="text/javascript" src="JS/jquery-3.2.1.min.js"></script> 


(2) 在 页 面 的 <body> 标 记 中 ， 首 先 添加 一 个 id 为 box 的 <span> 标 记 ， 然 后 在 该 标记 中 添加 一 张 
图 片 ， 用 于 控制 菜单 显示 ， 再 添加 一 个 id 为 menu 的 <div> 标 记 ， 用 于 显示 菜单 ， 最 后 在 <div> 标 记 中 
添加 用 于 显示 菜单 项 的 <ul> 和 <l 这 标记， 关键 代码 如 下 : 

01 <span id="box"> 


02 <img src="imagesl/title.gif" width="30" height="80" id="flag" /> 
03 <divid="menu"> 


04 <ul> 
05 <li><a href="#'> 图 书 介绍 </a></li> 
06 <li><a href=" 交 "> 新 书 预告 </a></li> 


07 <li><a href="#'> 图 书 销售 </a></li> 
08 <li><a href=" 娄 '> 勘 误 发 布 </a></li> 
09 <li><a href="#'> 资 料 下 载 </a></li> 
10 <li><a href= "六 > 好 书 推荐 </a>< 中 > 
11 <li><a href="#'> 技 术 支 持 </a></li> 
12 <li><a href=" 娄 '> 联 系 我 们 </a></li> 
13 </u> 

14 </div> 

15 </span> 
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(3) 编写 CSS 样式 ， 用 于 控制 菜单 的 显示 样式 ， 具 体 代码 如 下 : 


01 <style type="text/css"> 


02 uf 

03 font-size:12px; 六 设置 字体 大 小 */ 
04 list-style:none; 不 显示 项 目 符号 */ 
05 margin:0px; 让 设置 外 边 距 */ 

06 padding:0px; * 设 置 内 边 距 */ 
O70 

08 I 

09 padding:7px; 让 设置 内 边 距 */ 

10 } 

11 a{ 

12 color:#000; /设置 文字 颜色 
13 text-decoration:none; 不 显示 下 划 线 */ 
14 } 

15 a:hover{ 

16 color:#F90; /设置 文字 颜色 % 
de 

18  #menu{ 

19 floatleft; A* 浮 动 在 左 侧 */ 

20 text-align:center; A* 文 字 水 平 居 中 显示 */ 
21 width:70px; /设置 宽度 %/ 

22 height:295px; 让 设置 高 度 */ 

23 padding-top:5px; 让 设置 顶 内 边 距 */ 
24 display:none; /* 显 示 状 态 为 不 显示 
25 background-image:url(images/menu_bg.gif); * 设 置 背 景 图 片 */ 
26 } 

27 </style> 


(4) 在 引入 jQuery 库 的 代码 下 方 编写 jQuery 代码 ， 应 用 jQuery 的 hover0 方 法 实现 菜单 的 显示 与 
隐藏 ， 具 体 代码 如 下 : 


01 <scripttype="text/javascript"> 
02 S$(document).ready(function(X{ 


03 $("#box").hover(function(X{ 

04 $("#menu").show(300); /显示 菜单 
05 },function(X 

06 $("#menu").hide(300); /隐藏 菜单 
07 入 

08 六 

09 </script> 


运行 本 实例 ， 将 显示 如 图 19.1 所 示 的 效果 ， 将 鼠标 移 到 “隐藏 菜单 ”图 片上 时 ， 将 显示 如 图 19.2 
所 示 的 菜单 ， 将 鼠标 从 该 菜单 上 移出 后 ， 又 将 显示 为 图 19.1 所 示 的 效果 。 
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[® | 司 ENcodestl7WIVi 


文件 中 旨 句 E) 得 看 (V)。 收 项 交 (A) 工具 0 ”| 


司 Ecodestl7wlincP -oj 屋 
村 强 (E) 下 看 (V) 收藏 突 (A 工具 0 ” 
-一 


图 19.2 ”鼠标 移入 隐藏 菜单 的 效果 


19.2 淡 入 、 淡 出 的 动画 效果 


| 
| 视频 讲 


如 果 在 显示 或 隐藏 元 素 时 不 需要 改变 元 素 的 高 度 和 宽度 ， 只 单独 改变 元 素 的 透明 度 ， 可 以 使 用 淡 
入 、 淡 出 的 动画 效果 。jQuery 中 提供 了 如 表 19.1 所 示 的 实现 淡 入 、 淡 出 动画 效果 的 方法 。 


表 19.1 实现 淡 入 、 淡 出 动画 效果 的 方法 
通过 增 大 不 透明 度 实现 匹配 元 素 淡 入 的 效果 
通过 减 小 不 透明 度 实现 匹配 元 素 淡出 的 效果 


将 匹配 元 素 的 不 透明 度 以 渐进 的 方式 调整 到 | SC'img")fadeTo(300.0.15)J/ 在 0.3 秒 
指定 的 参数 内 将 图 片 调整 到 15% 不 透明 


这 3 种 方法 都 可 以 为 其 指定 速度 参数 , 参数 的 规则 与 hde0 和 show0 方 法 的 速度 参数 一 致 。 在 使 用 
fadeTo() 方 法 指定 不 透明 度 时 ， 参 数 只 能 是 0~1 之 间 的 数字 ，0 表示 完全 透明 ，1 表示 完全 不 透明 ， 数 
值 越 小 图 片 的 可 见 性 就 越 差 。 

例如 ， 如 果 想 把 实例 19.01 修改 成 带 淡 入 、 淡 出 动画 效果 的 隐藏 菜单 ， 可 以 将 对 应 的 jQuery 代码 
修改 如 下 : 

01 <script type="textjavascript"> 

02 S$(document).ready(function(X{ 


fadeTo(speed.opacity.[callback]) 


03 $("#box").hover(function({ 

04 S$("#menu") fadeIn(700); // 淡 入 效果 
05 }function(X 

06 S$("‘#menu") fadeOut(700); /淡出 效果 
07 »; 

08 »); 

09 </script> 
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修改 后 的 运行 效果 如 图 19.3 所 示 。 


a EA 
| 新 居于 
图 书 江 此 


图 19.3 采用 淡 入 、 淡 出 效果 的 自动 隐藏 式 菜单 


193 滑动 效果 


在 jQuery 中 ， 提 供 了 slideDown0 方 法 (用 于 滑动 显示 匹配 的 元 素 )、slideUp0 方 法 (用 于 滑动 隐 
藏 匹配 的 元 素 ) 和 slideToggle() 方 法 〈 用 于 通过 高 度 的 变化 动态 切换 元 素 的 可 见 性 ) 来 实现 滑动 效果 。 
下 面 分 别 进行 介绍 。 


19.3.1 滑动 显示 匹配 的 元 素 


使 用 slideDown() 方 法 可 以 向 下 增加 元 素 高 度 动态 显示 匹配 的 元 素 。slideDown( 方 法 会 逐渐 向 下 增 
加 匹配 的 隐藏 元 素 的 高 度 ， 直 到 元 素 完 全 显示 为 止 。 

语法 如 下 : 

slideDown(speed,[callback]) 

参数 说 明 。 

回 speed: 用 于 指定 动画 的 时 长 。 可 以 是 数字 ， 也 就 是 元 素 经 过 多 少 毫 秒 后 完全 显示 ， 还 可 以 是 
默认 参数 slow (600 毫秒 )、normal (400 毫秒 ) 和 fast (200 毫秒 )。 

回 ”callback: 可 选 参数 ， 用 于 指定 元 素 显 示 完 成 后 要 触发 的 回调 函数 。 

例如 ， 要 在 300 毫秒 内 滑动 显示 页 面 中 的 id 为 ad 的 元 素 ， 可 以 使 用 下 面 的 代码 : 


$("#ad").slideDown(300); /在 300 毫秒 内 滑动 显示 id 为 ad 的 元 素 


19.3.2 ”滑动 隐藏 匹配 的 元 素 


使 用 slideUp0 方 法 可 以 向 上 减少 元 素 高 度 动态 隐藏 匹配 的 元 素 。slideUp0 方 法 会 逐渐 向 上 减少 匹 
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配 的 显示 元 素 的 高 度 ， 直 到 元 素 完全 隐藏 为 止 。 
语法 如 下 : 


slideUp(speed,[callback]) 


参数 说 明 。 

回 speed: 用 于 指定 动画 的 时 长 。 可 以 是 数字 ， 也 就 是 元 素 经 过 多 少 毫秒 后 完全 隐藏 ， 还 可 以 是 
默认 参数 slow (600 毫秒 )、normal (400 毫秒 ) 和 fast (200 毫秒 )。 

回 callback:， 可 选 参数 ， 用 于 指定 元 素 隐藏 完成 后 要 触发 的 回调 函数 。 

例如 ， 要 在 300 毫秒 内 滑动 隐藏 页 面 中 的 id 为 ad 的 元 素 ， 可 以 使 用 下 面 的 代码 : 

S$("#ad").slideUp(300); // 在 300 毫秒 内 滑动 隐藏 id 为 ad 的 元 素 


19.3.3 ”通过 高 度 的 变化 动态 切换 元 素 的 可 见 性 


通过 slideToggle0 方 法 可 以 实现 通过 高 度 的 变化 动态 切换 元 素 的 可 见 性 。 在 使 用 slideToggle0 方 法 
时 ， 如 果 元 素 是 可 见 的 ， 就 通过 减 小 元 素 的 高 度 使 元 素 全 部 隐藏 ， 如 果 元 素 是 隐藏 的 ， 就 通过 增加 元 
素 的 高 度 使 元 素 最 终 全 部 可 见 。 

语法 如 下 : 

slideToggle(speed,[callback]) 


参数 说 明 。 
回 ”speed: 用 于 指定 动画 的 时 长 。 可 以 是 数字 ， 也 就 是 元 素 经 过 多 少 毫秒 后 完全 显示 或 隐藏 ， 还 
可 以 是 默认 参数 slow (600 毫秒 )、normal (400 毫秒 ) 和 fast (200 毫秒 )。 

回 callback: 可 选 参数 ， 用 于 指定 动画 完成 时 触发 的 回调 函数 。 

例如 ， 要 实现 单 击 id 为 flag 的 图 片 时 ， 控 制 菜单 的 显示 或 隐藏 默认 为 不 显示 ， 奇 数 次 单 击 时 显 
示 ， 偶 数 次 单 击 时 隐藏 )， 可 以 使 用 下 面 的 代码 : 

01 S$("#ag").click(function(X{ 

02 S$("#menu").slideToggle(300); // 显 示 或 隐藏 菜单 

03 )); 

【 例 19.02】 应 用 jQuery 实现 滑动 效果 的 具体 应 用 一 一 伸缩 式 导航 菜单 。 实 现 步 又 如 下 :( 实例 
位 置 : 资源 包 \ 源 码 \19\19.02 ) 

(1) 创建 index.html 文件 ， 在 该 文件 的 <head> 标 记 中 应 用 下 面 的 语句 引入 jQuery 库 。 

<script type="text/javascript" src="JS/jquery-3.2.1.min.js"></script> 


(2) 在 页 面 的 <body> 标 记 中 ， 首 先 添加 一 个 <div> 标 记 ， 用 于 显示 导航 菜单 的 标题 ， 然 后 添加 一 
个 <dl> 标 记 ， 在 标记 内 添加 主 菜单 项 及 其 子 菜单 项 ， 其 中 主 菜 单项 由 <dt> 标 记 定义 ， 子 菜单 项 由 <dd> 
标记 定义 ， 最 后 再 添加 一 个 <div> 标 记 ， 用 于 显示 导航 菜单 的 结尾 ， 关 键 代 码 如 下 : 
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(3) 编写 CSS 样式 ， 用 于 控制 导航 菜单 的 显示 样式 ， 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
4 
2 
23 
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<div id="top"></div> 
<dl> 


<dt> 员 工 管理 </dt> 
<dd> 
<div class="item"> 添 加 员工 信息 </div> 
<div class="item"> 管 理 员 工 信 息 </div> 
</dd> 
<dt> 招 聘 管理 </dt> 
<dd> 
<div class="item"> 浏 览 应 聘 信 息 </div> 
<div class="item"> 添 加 应 聘 信息 </div> 
<div class="item"> 浏 览 人 才 库 </div> 
</dd> 
<dt> 薪 酬 管理 </dt> 
<dd> 
<div class="item"> 薪 酬 登记 </div> 
<div class="item"> 薪 酬 调整 </div> 
<div class="item"> 薪 酬 查询 </div> 
</dd> 


<dt class="title"><a href="#"> 退 出 系统 </a></dt> 


</dl> 
<div id="bottom"></div> 


<style type="text/css"> 
di{ 


} 


width: 158px; 
margin:0px; 


dt{ 


D 


font-size: 14px; 

padding: 0px; 

margin: 0px; 

width:146px; 

height:19px; 
background-image:url(images/title_show.gif); 
padding:6px Opx Opx 12px; 

Color:#215dc6; 

font-size:12px; 

cursor:hand; 


dd{ 


color: #000; 
font-size: 12px; 
margin:Opx; 


} 


at 


具体 代码 如 下 : 


/设置 宽度 %/ 
/设置 高 度 %/ 
”设置 背景 图 片 */ 
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24 text-decoration: none; 不 显示 下 划 线 */ 
25 } 

26 a:hover { 

2 color: #FF6600; 

28 

29 #top{ 

30 width:158px; /设置 宽度 4/ 

Bl height:30px; 让 设置 高 度 */ 

32 background-image:url(images/top.gif); 广 设置 背景 图 片 */ 
33 小 

34 #bottom{ 

35 Width:158px; 让 设置 宽度 */ 

36 height:31px; 设置 高 度 */ 

37 background-image:url(images/bottom.gif); A* 设 置 背 景 图 片 */ 
38 } 

39 .title{ 

40 background-image:url(images/title_quit.gif); * 设 置 背 景 图 片 */ 
41 } 

42 .item{ 

43 width:146px; 让 设置 宽度 */ 

44 height:15px; 六 设 置 高 度 */ 

45 background-image:url(images/item_bg.gif); 设置 背景 图 片 */ 
46 padding:6px Opx Opx 12px; 

47 color#215dc6; 

48 font-size:12px; 

49 cursor:hand; 

50 background-position:center; 

51 background-repeat:no-repeat; 

52 } 

53 </style> 


(4) 在 引入 jQuery 库 的 代码 下 方 编写 jQuery 代码 ， 首 先 隐藏 全 部 子 菜单 ， 然 后 应 用 click0 方 法 ， 
当 单 击 主 菜单 时 实现 相应 子 菜单 的 显示 和 隐藏 ， 具体 代码 如 下 : 


01 <scripttype="text/javascript"> 
02 $(document).ready(function(X 


03  g('dd").hide(): // 隐 藏 全 部 子 菜单 

04 $("dt[classi='title]").click(function()f /| 单 击 主 菜单 执行 函数 
05 if($(this).next().is(":hidden")X{ // 如 果 匹 配 的 元 素 被 隐藏 
06 S(this).css("backgroundImage","url(images/title_hide.gif)"); // 改 变 主 菜单 的 背景 
07 S(this).next().slideDown("slow"); /滑动 显示 匹配 的 元 素 
08 Jelse{ 

09 S$(this).css("backgroundimage","url(images/title_show.gif)"); 。“// 改 变 主 菜单 的 背景 
10 S(this).next().slideUp("slow"); // 滑 动 隐藏 匹配 的 元 素 
| } 

12 六 

13 }) 

14 </script> 
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运行 本 实例 ， 将 显示 如 图 19.4 所 示 的 效果 ， 单 击 某 个 主 菜单 时 ， 将 展开 该 主 菜单 下 的 子 菜单 ， 例 
如 ， 单 击 “ 薪 酬 管理 ” 主 菜 单 ， 将 显示 如 图 19.5 所 示 的 子 菜单 。 通 常情 况 下 ,“ 退 出 系统 ” 主 菜单 没有 
子 菜单 ， 所 以 单 击 “ 退 出 系统 ” 主 菜单 将 不 展开 对 应 的 子 菜单 ， 而 是 激活 一 个 超 链 接 。 


FE EE3 


去 
@S 司 Ecodestlzwzinc p - 0B 


文件 由” 苦 志 [ 日 。 豆 看 V) 。 效 硬 关 (A) 工具 0 


图 19.4 未 展开 任何 菜单 的 效果 图 19.5 展开 “薪酬 管理 ” 主 菜 单 的 效果 


19.4 自 定 义 的 动画 效果 


前 面 已 经 介绍 了 3 种 类 型 的 动画 效果 ， 但 是 有 时 ， 开 发 人 员 需 要 一 些 更 加 高 级 的 动画 效果 ， 这 时 就 需 
要 采取 高 级 的 自 定义 动画 来 解决 这 个 问题 。 在 jQuery 中 ， 要 实现 自 定义 动画 效果 ， 主 要 应 用 animate() 
方法 创建 自 定义 动画 ， 应 用 stop0 方 法 停止 动画 。 下 面 分 别 进行 介绍 。 


19.4.1 使 用 animate() 方 法 创建 自 定义 动画 


animate() 方 法 的 操作 更 加 自由 ， 可 以 随意 控制 元 素 的 属性 ， 实 现 更 加 绚丽 的 动画 效果 。 

语法 如 下 : 

animate(params,speed,callback) 

参数 说 明 。 

回 params: 表示 一 个 包含 属性 和 值 的 映射 ， 可 以 同时 包含 多 个 属性 ， 例 如 {left:"200px",top: 
"100px"}。 

speed: 表示 动画 运行 的 速度 ， 参 数 规则 同 其 他 动画 效果 的 speed 一 致 ， 它 是 一 个 可 选 参 数 。 

callback: 表示 一 个 回调 函数 ， 当 动画 效果 运行 完毕 后 执行 该 回调 函数 , 它 也 是 一 个 可 选 参数 。 


人 o 注 总 | 
在 使 用 animate0 方 法 时 ， 必 须 设置 元 素 的 定位 属性 position 为 relative 或 absolute, 元 素 才能 动 起 


例如 ， 要 实现 将 id 为 fish 的 元 素 在 页 面 移动 一 圈 并 回 到 原点 ， 可 以 使 用 下 面 的 代码 : 
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<script type="text/javascript"> 
$(document).ready(function(){ 
$("#fish").animate({left:300},1000) 
-animate({top:200},1000) 
.animate({left:0},200) 
.animate({top:0},200); 


</script> 


在 上 面 的 代码 中 , 使 用 了 连 级 方式 的 排队 效果 ,这 种 排队 效果 ， 只 对 jQuery 的 动画 效果 函数 有 效 ， 
对 于 jQuery 其 他 的 功能 函数 无 效 。 
【 例 19.03】 本 实例 将 使 用 jQuery 中 的 animate() 方 法 创建 自 定义 动画 ， 实 现 拉 开 幕 帘 的 效果 ， 
该 效果 可 以 用 作 广 告 特 效 ， 也 可 以 用 于 个 人 主页 。 实 现 步骤 如 下 : ( 实例 位 置 : 资源 包 \ 源 码 \19\19.03 ) 
(1) 创建 ndex.html 文件 ， 在 该 文件 的 <head> 标 记 中 应 用 下 面 的 语句 引入 jQuery 库 。 
<script type="text/javascript" src="JS/jquery-3.2.1.min.js"></script> 
(2) 在 页 面 中 定义 两 个 div 元 素 ， 并 分 别 设置 class 属性 值 为 leftcurtain 和 rightcurtain， 再 把 幕 帘 
图 片 放置 在 这 两 个 div 中 。 然 后 定义 一 个 超 链 接 ， 用 来 控制 幕 帘 的 拉 开 与 关闭 ， 代 码 如 下 : 


01 
02 
03 
04 


欢迎 光临 奥 纳 影 城 <hr /> 

<div class="leftcurtain"><img src="images/frontcurtain.jpg"/></div> 
<div class="rightcurtain"><img src="images/frontcurtain.jpg"/></div> 
<a class="rope" href="#'> 拉 开幕 帘 </a> 


(3) 编写 CSS 样式 ， 用 于 设置 页 面 背景 以 及 控制 幕 帘 和 文字 的 显示 样式 ， 具 体 代 码 如 下 : 


01 


<style type="text/css"> 
Tt 
margin:0; 
padding:0; 
} 
body{ 
color: #FFFFFF:; 
text-align: center; 
background: #4f3722 url(images/darkcurtain.jpg') repeat-x; 
} 
img{ 
border: none; 
» 
p{ 
margin-bottom: 10px; 
color:#FFFFFF; 
3 
.leftcurtain{ 
width: 50%; 
height: 495px:; 
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pa | top: Opx; 

22 left: Opx; 

3 position: absolute; 
24 z-index: 2; 

25 } 

26 .rightcurtain{ 

ph width: 51%; 

28 height: 495px; 

29 right: Opx; 

30 top: Opx; 

31 position: absolute; 
32 Z-index: 3; 

33 } 

34 -rightcurtain img, .leftcurtain img{ 
35 width: 100%; 

36 height: 100%; 

37 } 

38 .Tope{ 

39 position: absolute; 
40 top: 70%; 

41 left: 60%; 

42 z-index: 100; 

43 font-size:36px; 

44 Color:#FFFFFF; 
45 } 

46 </style> 


(4) 在 引入 jQuery 库 的 代码 下 方 编写 jQuery 代码 。 首 先 定义 一 个 布尔 型 变量 ， 根 据 该 变量 可 以 
判断 当前 操作 幕 帘 的 动作 。 当 单 击 “ 拉 开幕 帘 ” 超 链接 时 ， 超 链接 的 文本 被 重新 设置 成 “关闭 幕 帘 ”， 
并 设置 两 侧 幕 帘 的 动画 效果 ; 当 单 击 “ 关 闭幕 帘 ” 超 链接 时 ， 超 链接 的 文本 被 重新 设置 成 “ 拉 开 幕 帘 ” 


并 设置 两 侧 幕 帘 的 动画 效果 ， 代 码 如 下 : 


01 <scripttype="text/javascript"> 
02 $(document).ready(function() { 


03 var curtainopen = false; 

04 $(".rope").click(function(X 

05 S$(this).blur(); 

06 if (curtainopen == false){ 

07 S(this).text(" 关 闭幕 帘 "); 

08 $(".leftcurtain").animate({width:"60px'}, 2000 ); 
09 $(".rightcurtain").animate({width:'60px"},2000 ); 
10 curtainopen = true; 

11 Jelse{ 

WP S(this).text(" 拉 开幕 帘 "); 

13 $(".leftcurtain").animate({width:"50%'}, 2000 ); 
14 $(".rightcurtain").animate({width:'51%'}, 2000 ); 
15 curtainopen = false; 


// 定 义 布尔 型 变量 

// 当 单 击 超 链接 时 

/使 超 链接 失去 焦点 

// 判 断 变 量 值 是 否 为 false 
// 设 置 超 链接 文本 
/设置 左 侧 幕 帘 动 画 
/设置 右 侧 幕 帘 动 画 
/变量 值 设 为 tue 


// 设 置 超 链接 文本 

// 设 置 左 侧 幕 帘 动画 
// 设 置 右 侧 幕 帘 动 画 
// 变 量 值 设 为 false 
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16 
17 入; 
18 »); 

19 </script> 


运行 实例 ， 效 果 如 图 19.6 所 示 ， 此 时 幕 帘 是 关闭 的 。 当 单 击 “ 拉 开幕 帘 ” 超 链接 时 ， 幕 帘 会 向 两 
边 拉 开 ， 效 果 如 图 19.7 所 示 。 


ET 


图 19.6 关闭 幕 帘 效 果 图 19.7 ” 拉 开幕 帘 效 果 


19.4.2 ”使 用 stop() 方 法 停止 动画 


stop() 方 法 也 属于 自 定义 动画 函数 ， 它 会 停止 匹配 元 素 正 在 运行 的 动画 ， 并 立即 执行 动画 队列 中 的 
下 一 个 动画 。 

语法 如 下 : 

stop(clearQueue,gotoEnd) 


参数 说 明 。 

加 ”clearQueue: 表示 是 否 清空 尚未 执行 完 的 动画 队列 〈 值 为 tue 时 表示 清空 动画 队列 )。 

回 ”gotoEnd: 表示 是 否 让 正在 执行 的 动画 直接 到 达 动 画 结束 时 的 状态 〈 值 为 tue 时 表示 直接 到 达 

动画 结束 时 状态 )。 

例如 ， 当 单 击 “ 停 止 动画 ”按钮 时 停止 id 为 fish 的 元 素 正在 执行 的 动画 效果 ， 清 空 动画 序列 并 直 
接 到 达 动 画 结束 时 的 状态 ， 只 需 在 $(document).ready0 方 法 中 加 入 下 面 这 行 代码 即 可 : 

01 $("#btn_stop").click(function(X{ 

02 S$("#fish").stop("true", "true"); /停止 动画 效果 

03 芒 ; 
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19.5 实 战 


19.5.1 滑动 显示 和 隐藏 文章 内 容 


在 页 面 中 定义 一 个 文章 标题 ， 当 单 击 该 标题 时 向 下 滑动 显示 文章 内 容 ， 当 再 次 单 击 该 标题 时 向 上 
滑动 隐藏 文章 内 容 ， 运 行 结 果 如 图 19.8 所 示 。( 实例 位 置 : 资源 包 \ 源 码 \19\ 实 战 \01 ) 


19.5.2 ”全 部 资源 与 精简 资源 之 间 的 切换 


实现 一 个 显示 全 部 资源 与 精简 资源 切换 的 功能 ， 运 行 结果 如 图 19.9 和 图 19.10 所 示 。( 实例 位 置 : 
资源 包 \ 源 码 \19\ 实 战 \02 ) 


J rE 


' < [© EE ET 


文件 (R)。 训 强 (E) 下 看 (V) 收 荐 闪 (A】 工具 TT) 帮助 (H) 


| ecoderminoNn P -< | CB ssw. 


A 工具 mm 站 Gti 
ET EEC 本 | sct 扫 所 床 视频 办 各 7821) 


Dressyeaver Ce 教程 (12289) hotoshop 视 频 教程 (8242) 


HTXL 5 页 基础 教程 G0440) CG 教程 07220) PE 视频 教程 (14894) Jara 视 频 教程 (9520) 

网 页 布局 情 章 C0808) SQL 执 据 库 视 频 孝 程 (17821) 建站 知识 C193) 了 Java 基础 教程 (4114) 

DreasWeaver C56 孝 程 (12289) PhotoShop 视 频 翰 程 (S242) JavaSeript 自 学 教程 (12205) 开发 宝典 (1466) 
其 它 资 源 0275) 得 言 入 门 与 RMG3091) 其 尼 资 大 0273) 


显示 全 部 资源 精 和 资源 


图 199 显示 精简 资源 图 19.10 显示 全 部 资源 
19.5.3 ”实现 影片 信息 向 上 滚动 效果 


在 影视 网 站 中 , 应 用 自 定义 动画 的 方法 实现 即将 上 线 影 片 信息 向 上 滚动 的 效果 , 运行 结果 如 图 19.11 
所 示 。( 实例 位 置 : 资源 包 \ 源 码 \19\ 实 战 \03 ) 
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图 19.11 即将 上 线 影片 信息 向 上 滚动 效果 
19.6 小 结 


本 章 详细 地 介绍 了 jQuery 动画 效果 的 实现 。 这 些 动画 效果 包括 元 素 的 隐藏 和 显示 、 淡 入 /淡出 效果 、 
滑动 效果 以 及 自 定义 动画 效果 。 本 章 内 容 应 用 比较 广泛 ， 希 望 读者 认真 学 习 。 


项 目 篇 
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本 篇 通过 一 个 完整 的 365 影视 网 站 设计 ， 运 用 软件 工程 的 设计 思想 ， 让 读者 学 
习 如 何 进 行 Web 项 目的 实践 开发 。 书 中 按照 “系统 分 析 一 系统 设计 一 网 页 预览 一 
关键 技术 一 首页 技术 实现 一 查看 影片 详情 页 面 ”的 流程 进行 介绍 ， 带 领 读者 亲身 体 
验 开 发 项 目的 全 过 程 。 


#2 0s 


365 影视 网 站 设计 
(名! 视频 讲解 : 46 分 钟 ) 


在 金 球 知识 经 济 和 信息 化 高 速 发 展 的 今天 ， 网 络 化 是 企业 发 展 的 趋势 ， 人 们 更 
习惯 在 网 站 上 看 电影 ， 企 业 要 想得到 突飞猛进 的 发 展 ， 就 必须 借助 网 络 。 

当今 社会 进入 了 一 个 信息 快速 发 展 的 时 代 ， 网 络 也 出 现 了 很 多 的 影视 网 站 ， 都 
很 受 欢迎 。 未 来 视听 生活 的 新 空间 ， 也 必然 在 宽带 互联 网 上 开启 。VOD (视频 点 播 ) 
的 概念 已 经 被 越 来 越 多 的 人 所 接受 ， 成 为 网 络 发 展 的 必然 趋势 之 一 。 本 章 将 使 用 
Javas9cript 技术 开发 一 个 影视 网 站 。 

通过 学 习 本 章 ， 读 者 主要 享 担 以 下 内 容 : 
应 用 JavaScript 实现 网 站 导航 菜单 
应 用 JavaScript 实现 图 片 的 轮换 效果 
应 用 Ajax 实现 热门 专题 页 面 
应 用 JavaScript 实现 电影 图 片 不 间断 滚动 
应 用 JavaScript 实现 浮动 窗口 
MW 应 用 jQuery 实现 滑动 门 效果 
”应 用 jQuery 实现 向 上 间断 滚动 效果 


吾 豆 吾 吾 至 
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20.1 系统 分 析 


计算 机 技术 、 网 络 通信 技术 、 多 媒体 技术 的 飞速 发 展 ， 对 人 类 的 生产 和 生活 方式 产生 了 很 大 影响 。 
随 着 多 媒体 应 用 技术 的 不 断 成 熟 ， 以 及 宽带 网 络 的 不 断 发 展 ， 我 们 相信 在 线 影 视点 播 一 定 会 成 为 网 络 
内 容 创新 的 重头 戏 。 影 视 网 站 可 以 满足 用 户 查 看 电影 排行 ， 浏 览 影片 资讯 和 在 线 观看 等 需求 。 


20.2 系统 设计 


20.2.1 系统 目标 


结合 实际 情况 及 需求 分 析 ，365 影视 网 将 具有 如 下 特点 。 
操作 简单 方便 、 界 面 简洁 美观 。 
能 够 全 面 展 示 影 片 分 类 ， 及 影片 详细 信息 。 
浏览 速度 快 ， 尽 量 避 免 长 时 间 打 不 开 页 面 的 情况 发 生 。 
影片 图 片 清楚 ， 文 字 醒目 。 
系统 运行 稳定 、 安 全 可 靠 。 
易 维护 ， 并 提供 二 次 开发 支持 。 
在 制作 项 目 时 ， 项 目的 需求 是 十 分 重要 的 ， 需 求 就 是 项 目 要 实现 的 目的 。 例 如 ， 我 要 去 医院 买 药 ， 
去 医院 只 是 一 个 过 程 ， 编 写 程序 代码 也 是 一 个 过 程 ， 目 的 就 是 去 买 药 (需求 )。 


20.2.2 ”系统 功能 结构 
365 影视 网 的 系统 功能 结构 如 图 20.1 所 示 。 


办 办 办 办 办 


ET 


图 20.1 365 影视 网 功能 结构 图 
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20.2.3 ”开发 环境 


在 开发 365 影视 网 时 ， 使 用 的 软件 开发 环境 如 下 。 
操作 系统 : Windows 7。 
PHP 运行 环境 : phpStudy20161103 
jQuery 版 本 : jquery-3.2.1.min.js。 
开发 工具 : WebStorm 2016.3。 
浏览 器 : IE 11。 
分 辩 率 ， 最 佳 效果 为 1680 X1050 像素 。 
由 于 该 项 目 使 用 了 Ajax 技术 请 求 PHP 文件 ,所 以 需要 在 计算 机 中 安装 PHP 运行 环境 .下面 以 PHP 
集成 环境 phpStudy 为 例 ， 介 绍 PHP 运行 环境 的 搭建 。 
首先 需要 在 phpStudy 的 官方 网 站 中 下 载 phpStudy 的 压缩 包 ， 下 载 地 址 为 http://www.phpstudy. 
net/a.php/211.html， 下 载 后 开始 执行 安装 操作 。 安 装 步骤 如 下 : 
(1) 对 phpStudy 的 压缩 包 进 行 解压 缩 , 然后 双击 phpStudy20161103.exe 安装 文件 ， 此 时 将 弹出 如 
图 20.2 所 示 的 对 话 框 。 
(2) 在 图 20.2 所 示 的 对 话 框 中 单 击 文件 夹 小 图 标 选 择 存储 路 径 ， 将 phpStudy 解压 在 计算 机 中 的 
D 盘 ， 单 击 OK 按钮 开始 解压 文件 ， 解 压 过 程 如 图 20.3 所 示 。 解 压 文件 完成 后 会 弹出 防止 重复 初始 化 
的 确认 对 话 框 ， 如 网 20.4 所 示 。 单 击 “ 是 ”按钮 后 进入 phpStudy 的 启动 界面 ， 启 动 完 成 后 的 结果 如 
图 20.5 所 示 。 


加 图 图 图 回回 


图 20.2 phpStudy 解压 对 话 框 


Apache: @ 志 
wsa: @ || 动 | me| ms| 


@ 为 了 防止 重复 初 尖 化 , 清点 「 星 」 兢 认 ! 


_ sm | 儿 其 他 选项 菜单 


图 20.4 ”防止 重复 初始 化 确认 对 话 框 图 20.5 phpStudy 启动 界面 
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在 Apache 服务 和 MySQL 服务 启动 成 功 之 后 ， 即 完成 了 phpStudy 的 安装 操作 。 这 时 ， 将 项 目 文件 
夹 Movie 存储 在 “D:\phpStudyWWW” 目 录 下 即 可 。 


注意 
访问 该 网 站 ,需要 在 浏览 器 的 地 址 栏 中 输入 “http://localhost/Movie/index.html”， 然 后 按 Enter 
键 运行 。 


20.2.4 ”文件 夹 组 织 结构 


365 影视 网 的 文件 夹 组 织 结构 如 图 20.6 所 示 。 


上 一 (CSS 样式 文件 存储 目录 
有 images 一 网 站 图 片 存储 目录 

有 有 intro 一 一 影片 详情 页 面 存 储 目录 
一 一 一 一 一 一 一 一 一 一 一 一 一 一 JavaScript 文件 存储 目录 
下 一 播放 电影 文件 存储 目录 
vdeo 一 一 一 一 一 一 一 一 一 一 一 一 一 一 电影 图 片 及 视频 文件 存储 目录 
本 actionhtm| 一 一 一 一 一 一 一 一 一 一 一 一 一 一 动作 片 分 类 页 面 

时 atht 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 文艺 片 分 类 页 面 

二 coalhtml 一 一 一 一 一 一 一 一 一 一 一 一 一 一 公司 介绍 页 面 

亚 cartoonhtml 一 一 一 一 一 一 一 一 一 一 一 一 一 一 动漫 分 类 页 面 
checkphp 一 一 一 一 Ajax 请 求 页 面 
horrorhtiml 一 一 一 一 一 一 一 一 一 一 一 一 一 改 怖 片 分 类 页 面 
indexhtml 一 一 一 一 一 一 一 一 一 一 一 一 一 网 站 主页 

lovehtm| 一 一 一 一 一 一 一 一 一 一 一 一 一 爱情 片 分 类 页 面 
scienceFicionhtiml 一 一 一 一 一 一 一 一 一 一 一 一 科幻 片 分 类 页 面 


图 20.6 365 影视 网 文件 夹 组 织 结构 图 


20.3 网 页 预览 


在 设计 365 影视 网 的 页 面 时 ， 应 用 CSS 样式 、<div> 标 签 、JavaScript 和 jQuery 技术 ， 
更 具有 时 代 气 息 的 网 页 。 其 页 面 效 果 如 下 。 

回 首页 

首页 主要 用 于 展示 热门 影片 、 电 影 排行 、 即 将 上 线 影片 等 信息 。 首 页 页 面 的 运行 结果 如 图 20.7 


所 示 。 
加 ”动作 片 分 类 页 面 
动作 片 分 类 页 面 主要 显示 动作 类 型 影片 的 列表 信息 ， 运 行 结果 如 图 20.8 所 示 。 
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365 化 影视 网 


Ea 名 上 Wf Mk 加 上 上 加 


365 入 影视 网 


末 页 Er 


图 20.8 动作 片 分 类 显示 页 面 
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回 ”查看 影片 详情 页 面 


查看 影片 详情 页 面 用 于 展示 该 电影 的 详细 信息 ， 运 行 结果 如 图 20.9 所 示 。 


发 行 时 间 : 2008-04-09 


影片 详情 : 


读 片 讲 沪 级 是 Bryan ( 连 妈 . 尼 这 访 》 是 一 名 座 休 的 特工 ， 常 年 的 特工 生活 使 其 与 奉子 女儿 的 关系 
越 来 直 诺 远 ,一 次 ,女儿 Kw 《 玛 报 -属于 断 饰 ) 想 征 得 Bryzn 司 意 去 巴 租 游 玩 ， 身 为 父亲 的 3qan 并 
不 闻 心 17 几 的 女儿 独自 出 行 ， 在 一 大 争 吵 后 ， 回 执 的 Bryan 终 于 答应 女儿 。 然而 在 巴黎 ，Kimntp 重 
到 了 时 帮 卖 淫 团 伙 的 捐 卖 ， 为 失 玫 女儿 ， 这 名 考 特工 重新 出 山 - 
imremes | FP: ”Al00% » 


图 20.9 查看 影片 详情 页 面 
回 ”影片 播放 页 面 
当 用 户 单 击 电影 图 片 、 电 影 名 称 或 国 图 标 时 会 打开 影片 播放 页 面 进行 观看 ， 运 行 结果 如 图 20.10 
所 示 。 


OOOOO 


图 20.10 影片 播放 页 面 
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20.4 关键 技术 


本 章 主要 使 用 了 JavaScript 脚本 、Ajax 技术 、jQuery 技术 等 关键 技术 。 下 面 对 本 章 中 用 到 的 这 几 
种 关键 技术 进行 简单 介绍 。 


20.4.1 


JavaScript 脚本 技术 


使 用 JavaScript 脚本 实现 的 动态 页 面 在 Web 上 随处 可 见 。 例 如， 本 程序 中 使 用 JavaScript 脚本 技术 
实现 了 导航 菜单 的 设计 、 图 片 不 间断 滚动 以 及 浮动 窗口 的 设计 等 。 

回 “导航 菜单 设计 

编写 JavaScript 代码 ， 实 现 当 鼠 标 经 过 主 菜单 时 显示 或 隐藏 子 菜单 ， 关 键 代 码 如 下 : 


01 


03 
04 
05 
06 
07 
08 
09 
10 
wb 
12 
13 
14 
15 
16 
村 
18 
19 
20 
21 
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<script type="text/javascript"> 
02 function showadv(par,par2,par3\{ 


} 


document.getElementByld("a0").style.display = "none"; 

/设置 id 为 a0bg 的 元 素 的 背景 图 片 为 空 
document.getElementByld("a0bg").style.backgroundlImage="”"; 
document.getElementByld("a1").style.display = "none"; 

/设置 id 为 a1bg 的 元 素 的 背景 图 片 为 空 
document.getElementByld("a1bg").style.backgroundlImage="™"; 
document.getElementByld("a2").style.display = "none"; 

/设置 id 为 a2bg 的 元 素 的 背景 图 片 为 空 
document.getElementByld("a2bg").style.backgroundImage="™"; 
document.getElementByld("a3").style.display = "none"; 

/设置 id 为 a3bg 的 元 素 的 背景 图 片 为 空 
document.getElementByld("a3bg").style.backgroundImage="™"; 
document.getElementByld("a4").style.display = "none"; 

/设置 id 为 a4bg 的 元 素 的 背景 图 片 为 空 
document.getElementByld("a4bg").style.backgroundlImage="™"; 
document.getElementByld("a5").style.display = "none"; 

/设置 id 为 a5bg 的 元 素 的 背景 图 片 为 空 
document.getElementByld("a5bg").style.backgroundImage="™"; 
document.getElementByld("a6").style.display = "none"; 

/设置 id 为 a6bg 的 元 素 的 背景 图 片 为 空 
document.getElementByld("a6bg").style.backgroundImage='""; 
document.getElementByld(par).style.display = ™"; 
/设置 指定 元 素 的 背景 图 片 


// 隐 藏 id 为 a0 的 元 素 


/隐藏 id 为 a1 的 元 素 


/隐藏 id 为 a2 的 元 素 


/隐藏 id 为 a3 的 元 素 


/隐藏 id 为 a4 的 元 素 


/隐藏 id 为 a5 的 元 素 


/隐藏 id 为 a6 的 元 素 


// 显 示 指定 的 元 素 


document.getElementByld(par3).style.backgroundlmage = "url(images/i13.gif)"; 


</script> 


电影 图 片 不 间断 滚动 效果 设计 
编写 JavaScript 代码 ， 定 义 Marquee(0 方 法 实现 电影 图 片 的 滚动 效果 ， 关 键 代 码 如 下 : 
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01 <scripttype="text/javascript"> 

02 var speed=30; // 设 置 超时 时 间 

03 ”demo2.innerHTML=demo1.innerHTML; /设置 id 为 demo2 的 元 素 的 HTML 内 容 
04 /设置 图 片 向 左 滚动 

05 function Marquee(){ 

06 if(demo2.o0ffsetWidth-demo.scrollLeft<=0X{ 


07 demo.scrollLeft-=demo1.offsetWidth; 

08 }yelse{ 

09 demo.scrollLeft++; 

10 

vl 

12 var MyMar=setlnterval(Marquee,speed); /实现 图 片 滚动 


13 /鼠标 移入 图 片 时 停止 滚动 
14 demo.onmouseover=function(}{ 
15 clearlnterval(MyMar); 


} 
17 /鼠标 移出 图 片 时 继续 滚动 
18 demo.onmouseout=function(){ 
19 MyMar=setlnterval(Marquee,speed); 
207 
21 </script> 


20.4.2 Ajax 无 刷新 技术 


在 本 程序 中 使 用 Ajax 无 刷新 技术 实现 了 热门 专题 的 显示 ， 创 建 一 个 单独 的 JavaScript 文件 ， 名 称 
为 AjaxRequestjs， 并 且 在 该 文件 中 编写 重 构 Ajax 所 需 的 代码 ， 关 键 代码 如 下 : 


01 varnet=new Object(); /定义 一 个 全 局 的 变量 
02 /编写 构造 函数 

03 net.AjaxRequest=function(url,onload,onerror,method,params){ 

04 this.req=null; 

05 this.onload=onload; 

06 this.onerror=(onerror) ? onerror : this.defaultError; 

07 this.loadDate(url,method,params); 


} 
09 /编写 用 于 初始 化 XMLHttpRequest 对 象 并 指定 处 理 函数 ， 最 后 发 送 HTTP 请 求 的 方法 
10 net.AjaxRequest.prototype.loadDate=function(url,method,params){ 
11 if (ImethodX{ 


12 method="GET"; // 设 置 默 认 的 请 求 方式 为 GET 
ta 

14 if (window.XMLHttpRequestX{ // 非 IE 浏览 器 

15 this.req=new XMLHttpRequest(); /| 创建 XMLHttpRequest 对 象 
16 } else if (window.ActiveXObjectX{ JIE 浏览 器 

17 ty{ 

18 this.req=new ActiveXObject("Microsoft.XMLHTTP"); /创建 XMLHttpRequest 对 象 
19 } catch (e) { 

20 ty{ 

2 this.req=new ActiveXObject("Msxml2.XMLHTTP"); // 创 建 XMLHttpRequest 对 象 
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22 } catch (e) 0 

23 } 

24 

25 if (this.req}{ 

26 ty{ 

2 var loader=this; 

28 this.req.onreadystatechange=function(X{ 

29 net.AjaxRequest.onReadyState.call(loader); 

30 

31 this.req.open(method,url,true); /建立 对 服务 器 的 调用 
32 if(method=="POST"X // 如 果 提交 方式 为 POST 
33 /设置 请 求 的 内 容 类 型 

34 this.req.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
35 this.req.setRequestHeader("x-requested-with", "ajax"); ”// 设 置 请求 的 发 出 者 
36 } 

37 this.req.send(params); // 发 送 请 求 

38 }catch (err){ 

39 this.onerror.call(this); // 调 用 错误 处 理 函 数 
40 } 

41 } 

42 


} 
43 ”// 重 构 回 调 函 数 
44 net.AjaxRequest.onReadyState=function(X{ 
45 var req=this.req; 


46 varready=req.readyState; // 获 取 请 求 状态 

47 if(ready==4X{ // 请 求 完成 

48 if (req.status==200 X{ /请求 成 功 

49 this.onload.call(this); 

50 jelsef 

51 this.onerror.call(this); // 调 用 错误 处 理 函 数 
52 } 

53 } 

54 


} 
55 ”// 重 构 默 认 的 错误 处 理 函 数 
56 net.AjaxRequest.prototype.defaultError=function(X{ 
57 alert(" 错 误 数 据 \n\n 回调 状态 :" + this.req.readyState + "\n 状态 : " + this.req.status); 
58 } 


20.4.3 jQuery 技术 

要 在 自己 的 网 站 中 应 用 jQuery 库 , 需要 下 载 并 配置 它 。 要 想 在 文件 中 引入 jQuery 库 , 需要 在 <head> 
标记 中 应 用 下 面 的 语句 引入 。 

<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> 


例如 ， 在 本 程序 中 使 用 jQuery 实现 了 滑动 门 的 技术 ， 通 过 编写 jQuery 代码 ， 实 现 电 影 排 行 中 热 播 
影片 和 经 典 影片 的 切换 效果 。 关 键 代码 如 下 : 
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01 <scripttype="text/javascript"> 
02 $(document).ready(function() { 


03 $(".tab_content").hide(); // 将 class 值 为 tab_content 的 div 隐藏 

04 S$("ul.tabs li a:first").addClass("active"); // 为 第 一 个 选项 卡 添加 样式 

05 $(".tab_content:first").show(); // 将 第 一 个 class 值 为 tab_content 的 div 显示 
06 $("ul.tabs li a").hover(function() { // 将 鼠标 移 到 某 选 项 卡 上 

07 $("ultabs li a").removeClass("active"); // 移 除 样式 

08 S$(this).addClass("active"); // 为 当前 的 选项 卡 添加 样式 

09 $(".tab_content").hide(); // 将 所 有 class 值 为 tab_content 的 div 隐藏 
10 var activeTab = $(this).attr("name"); // 获 取 当 前 选项 卡 的 name 属性 值 

11 S$(activeTab).show(); // 将 相同 id 值 的 div 显示 

12 六 

13 六 

14 </script> 


20.5 首页 技术 实现 


20.5.1 JavaScript 实现 导航 菜单 


在 网 站 的 首页 index.html 中 ， 通 过 导航 菜单 实现 在 不 同 页 面 之 间 的 跳 转 。 导 航 菜单 的 运行 结果 如 
图 20.11 所 示 。 
首页 爱情 片 动作 片 科幻 片 丽 怖 片 文艺 片 动漫 


爱情 喜剧 古 曲 爱情 观 代 和 去 情 
图 20.11 导航 菜单 的 运行 结果 
导航 菜单 主要 通过 JavaScript 技术 实现 ， 具 体 实现 过 程 如 下 : 
(1) 在 页 面 中 添加 显示 导航 菜单 的 <div>， 通 过 css 控制 div 标签 的 样式 ， 在 <div> 中 插入 表格 ， 
然后 在 表格 中 添加 菜单 名 称 和 图 片 ， 具 体 代码 如 下 :( 实例 位 置 : 资源 包 \ 源 码 \20\Movie\index.html ) 


01 <div> 

02 <table cellspacing="0" cellpadding="0" width="100%" border="0"> 

03 <tr> 

04 <td><div class="i01w"> 

05 <table cellspacing="0" cellpadding="0" width="100%" border="0"> 

06 <tr> 

07 <td width="166" height="42" align="center id="a0bg"> 

08 <span id="a0color' onmouseover="showadv('a0','a0color,'a0bg')"> 

09 <a href="index.html"><span style="color:#FA4A05"> 首 页 </span></a> 
10 </span> 

a </td> 

<td width="1"><img src="images/i14.gif" width="1" height="25" /></td> 
13 <td id="a1bg" align="center" width="166"> 

14 <span id="a1color" onmouseover="showadv('a1','a1color','a1bg'")"> 
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<a href="love.htmI"> 爱 情 片 </a> 
</span> 
</td> 
<!- 省 略 部 分 主 菜单 代码 -> 
<td width="1"><img src="images/i14.gif" width="1" height="25" /></td> 
<td id="a6bg" align="center" width="166"> 
<span id="a6color" onmouseover="showadv('a6','a6color','a6bg'")"> 
<a href="cartoon.html"> 动 漫 </a> 
</span> 
</td> 
</tr> 
</table> 
</div></td> 
</tr> 
<tr> 
<td><table width="100%" height="41" cellpadding="0" cellspacing="0" id="a0" border="0"> 
<tr> 
<td align="left" style="padding-left:12px"> 欢 迎 来 到 365 影视 网 </td> 
</tr> 
</table> 
<table id="a1" style="display: none" height="41" cellspacing="0" 
cellpadding="0" width="100%" border="0"> 
<tr> 
<td style="padding-left:97px" align="left"><ul class="i02w"> 
<li> 爱 情 喜 剧 </li> 
<li> 古 典 爱情 </li> 
<li> 现 代 爱 情 </li> 
</ul></td> 
</tr> 
</table> 
<!- 省 略 部 分 子 菜单 代码 --> 
<table id="a6" style="display: none" height="41" cellspacing="0" cellpadding="0" 
width="100%" border="0"> 


<tr> 
<td style="padding-right:2px"><ul class="i03w"> 
<Ii> 历 史 动漫 </li> 
<I 记 搞笑 动漫 </li> 
<I 记 英雄 动漫 </li> 
</ul></td> 
</tr> 
</table></td> 
</tr> 
</table> 
</div> 


(2) 编写 JavaScript 代码 ， 实 现 当 鼠标 经 过 主 菜单 时 显示 或 隐藏 子 菜单 ， 具 体 代 码 如 下 :( 实例 位 


01 
02 
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: 资源 包 \ 源 码 \20\Movie\index.html ) 


<script type="text/javascript"> 
function showadv(par,par2,par3\{ 
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03 document.getElementByld("a0").style.display = "none"; /隐藏 id 为 a0 的 元 素 
04 /设置 id 为 a0bg 的 元 素 的 背景 图 片 为 空 

05 document.getElementByld("a0bg").style.backgroundlImage="™"; 

06 document.getElementByld("a1").style.display = "none"; /隐藏 id 为 a1 的 元 素 
07 /设置 id 为 a1bg 的 元 素 的 背景 图 片 为 空 

08 document.getElementByld("a1bg").style.backgroundlImage="™"; 

09 document.getElementByld("a2").style.display = "none"; /隐藏 id 为 a2 的 元 素 
10 // 设 置 id 为 a2bg 的 元 素 的 背景 图 片 为 空 

11 document.getElementByld("a2bg").style.backgroundImage="™"; 

届 document.getElementByld("a3").style.display = "none"; /隐藏 id 为 a3 的 元 素 
13 /设置 id 为 a3bg 的 元 素 的 背景 图 片 为 空 

14 document.getElementByld("a3bg").style.backgroundlImage="”"; 

15 document.getElementByld("a4").style.display = "none"; /隐藏 id 为 a4 的 元 素 
16 /设置 id 为 a4bg 的 元 素 的 背景 图 片 为 空 

17 document.getElementByld("a4bg").style.backgroundImage=""; 

18 document.getElementByld("a5").style.display = "none"; 。// 隐 藏 id 为 a5 的 元 素 
19 // 设 置 id 为 a5bg 的 元 素 的 背景 图 片 为 空 

20 document.getElementByld("a5bg").style.backgroundImage="™"; 

21 document.getElementByld("a6").style.display = "none"; /隐藏 id 为 a6 的 元 素 
22 /设置 id 为 a6bg 的 元 素 的 背景 图 片 为 空 

23 document.getElementByld("a6bg").style.backgroundImage="™"; 

24 document.getElementByld(par).style.display = ""; /显示 指定 的 元 素 

25 /设置 指定 元 素 的 背景 图 片 

26 document.getElementByld(par3).style.backgroundlmage = "url(images/i13.gif)"; 
7 

28 </script> 


20.5.2 ”JavaScript 实现 图 片 的 轮换 效果 


在 index.html 首页 中 ， 应 用 JavaScript 实现 电影 图 片 轮换 效果 的 网 页 特效 ， 以 此 来 展示 近期 较 热门 
的 电影 ， 其 运行 效果 如 图 20.12 所 示 。 


图 20.12 电影 图 片 轮换 效果 


影 图 片 轮换 效果 的 实现 过 程 如 下 : 
(1) 在 页 面 中 定义 一 个 <div> 元 素 ， 在 该 元 素 中 定义 两 个 图 片 ， 然 后 为 图 片 添加 超 链接 ， 并 设置 
超 链接 标签 <a> 的 name 属性 值 为 1， 代码 如 下 : ( 实例 位 置 : 资源 包 \ 源 码 \20\Movie\index.html ) 


01 <div id='tabs> 
02 <a name="i" href="#"><img src="video/13.png" width="100%" height="320" /></a> 
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03 <a name="i" href="#"><img src="video/14.png" width="100%" height="320" /></a> 
04 </div> 


(2) 在 页 面 中 定义 CSS 样式 ， 用 于 控制 页 面 显 示 效果 ， 上 有 具体 代 码 如 下 :( 实例 位 置 : 资源 包 \ 源 码 \ 
20\Movie\css\style.css ) 


01 <style type="text/css"> 


02 #tabs{ 

03 width:100%; 

04 height:320px; 
05 overflow:hidden; 
06 float:left; 

07 position:relative; 
08 } 

09 </style> 


(3) 在 页 面 中 编写 JavaScript 代码 ， 应 用 Document 对 象 的 getElementsByName0) 方 法 获取 name 
属性 值 为 i 的 元 素 ， 然 后 编写 自 定义 函数 changeimage0， 最 后 应 用 setInterval0 方 法 ， 每 隔 3 秒 钟 就 执 
行 一 次 changeimage0 函 数 。 具 体 代码 如 下 :( 实例 位 置 : 资源 包 \ 源 码 \20\Movie\js\script.js ) 


01 <scripttype="text/javascript"> 


02 var len = document.getElementsByName("i"); /获取 name 属性 值 为 i 的 元 素 

03 var pos = 0; /定义 变量 值 为 0 

04 function changeimage(X{ 

05 len[pos].style.display = "none"; /隐藏 元 素 

06 pos++; /变量 值 加 1 

07 if(pos == len.length) pos=0; // 变 量 值 重 新 定义 为 0 

08 len[pos].style.display = "block"; /显示 元 素 

09 

10 setlnterval("changeimage()",3000); /每 隔 3 秒 钟 执行 一 次 changeimage() 函 数 
11 </script> 


20.5.3 Ajax 实现 热门 专题 页 面 


热门 专题 页 面 主要 显示 热门 电影 的 相关 信息 ， 应 用 Ajax 技术 ， 每 隔 一 定时 间 就 会 无 刷新 获取 最 新 
的 热门 专题 信息 。 热 门 专题 信息 展示 的 运行 效果 如 图 20.13 所 示 。 
热门 专题 


愤 四 的 小 乌 》 小 乌 飞 起 来 


极度 惊悚 》 胆 小 者 匆 入 
黑海 村 金 》 表 德 治 成 措 金 校 时 
《潜伏 者 》 毒 师 卧 底 帕 毒 集团 


图 20.13 热门 专题 信息 展示 


热门 专题 信息 的 展示 主要 通过 Ajax 重 构 技术 实现 ， 具 体 实现 过 程 如 下 : 
(1) 在 页 面 中 添加 一 个 <span> 标 签 用 于 显示 热门 专题 标题 ， 再 添加 一 个 显示 热门 专题 信息 的 
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<div>， 有 具体 代码 如 下 : ( 实例 位 置 : 资源 包 \ 源 码 \20\Movie\index.html ) 


01 
02 


<span class="hot"> 热 门 专题 </span> 
<div id="showlnfo"></div> 


(2) 创建 一 个 单独 的 JavaScript 文件 ， 名 称 为 AjaxRequestjs， 在 该 文件 中 编写 重 构 Ajax 所 需 的 
代码 ， 有 具体 代码 如 下 : (实例 位 置 : 资源 包 \ 源 码 \20\Movie\js\AjaxRequest.js ) 


var net=new Object(); /创建 一 个 自 定义 对 象 
/编写 构造 函数 
net.AjaxRequest=function(url,onload,onerror,method,params){ 

this.req=null; 

this.onload=onload; 

this.onerror=(onerror) ? onerror : this.defaultError; 

this.loadDate(url,method,params); 


b 
// 编 写 用 于 初始 化 XMLHttpRequest 对 象 并 指定 处 理 函 数 ， 最 后 发 送 HTTP 请 求 的 方法 
net.AjaxRequest.prototype.loadDate=function(url,method,params){ 


if (ImethodX{ 
method="GET"; // 设 置 默认 的 请 求 方式 为 GET 
(window.XMLHttpRequest}{ // 非 IE 浏览 器 
this.req=new XMLHttpRequest(); /创建 XMLHttpRequest 对 象 
} else if (window.ActiveXObjectj{ UIE 浏览 器 
人 ActiveXObject("Microsoft. XMLHTTP"); /创建 XMLHttpRequest 对 象 
}catch (e){ 
try{ 
this.req=new ActiveXObject("Msxml2.XMLHTTP"); /创建 XMLHttpRequest 对 象 
}catch (e) 0 
} 
} 
if (this.req){ 
try{ 


var loader=this; 
this.req.onreadystatechange=function(){ 

net.AjaxRequest.onReadyState.call(loader); 
} 


this.req.open(method,url,true); /建立 对 服务 器 的 调用 
if(method=="POST"X // 如 果 提交 方式 为 POST 
// 设 置 请 求 的 内 容 类 型 
this.req.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
this.req.setRequestHeader("x-requested-with", "ajax"); /1 设置 请 求 的 发 出 者 

} 
this.req.send(params); /发 送 请 求 

jcatch (errj{ 

this.onerror.call(this); ll 调用 错误 处 理 函 数 


} 
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} 
} 
// 重 构 回 调 函 数 
net.AjaxRequest.onReadyState=function(X{ 
var req=this.req; 


var ready=req.readyState; 1/ 获 取 请 求 状态 
if (ready==4X{ /请求 完成 
if (req.status==200 X{ /| 请求 成 功 
this.onload.call(this); 
Jelse{ 
this.onerror.call(this); // 调 用 错误 处 理 函 数 
} 
} 
} 
// 重 构 默认 的 错误 处 理 函 数 


net.AjaxRequest.prototype.defaultError=function(X{ 
alert(" 错 误 数 据 \n\n 回调 状态 :" + this.req.readyState + "\n 状态 : " + this.req.status); 


} 


(3) 在 需要 应 用 Ajax 的 页 面 index.html 中 应 用 以 下 语句 引入 步骤 (2) 中 创建 的 JavaScript 文件 。 
(实例 位 置 : 资源 包 \ 源 码 \20\Movie\index.html ) 


<script type="text/javascript" src="js/AjaxRequest.js"></script> 

(4) 在 应 用 Ajax 的 页 面 中 编写 错误 处 理 的 函数 、 实 例 化 Ajax 对 象 的 函数 getmfo0 和 回调 函数 ， 
并 每 隔 10 分 钟 调用 一 次 getInfo0 函 数 ， 实 现 获取 最 新 消息 的 功能 。 有 具体 代码 如 下 :( 实例 位 置 : 资源 
包 \ 源 码 \20\Movie\index.html ) 


01 
02 
03 
04 
05 
06 
07 
08 


09 
10 
5 
12 
13 
14 
15 
16 
17 
18 


<script type="text/javascript"> 
jeerexxxexxaxxxxns 错 误 处 理 的 国 数 * 人 人 人 
function onerror(){ 
alert(" 您 的 操作 有 误 !"); 
ee Ajax a 
function getlnfo(){ 
var loader=new net.AjaxRequest("check.php?nocache="+new Date().getTime()， 
deal_getInfo,onerror,"GET"); 
} 


[着 


function deal_getlnfo(){ 
document.getElementByld("showlnfo").innerHTML=this.req.responseText' 
} 


window.onload=function(X{ 
getinfo(); // 调 用 getlnfo() 函 数 获取 最 新 消息 
window.setinterval("getIinfo()", 600000); /| 每 隔 10 分 钟 调用 一 次 getinfo() 函 数 


» 
</script> 
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20.5.4 JavaScript 实现 电影 图 片 不 间断 滚动 


在 index.html 页 面 中 ， 以 图 片 滚动 的 形式 来 展示 电影 信息 。 电 影 图 片 不 间断 滚动 的 运行 结果 如 图 20.14 


所 示 。 


这 :一 一 ROMAN HOLIDAY 


募 光 之 城 


职 血 昂 的 受 情 故 事 男孩 女孩 同 的 有 1 


图 20.14 ”电影 图 片 不 间断 滚动 


电影 图 片 不 间断 滚动 的 效果 主要 通过 JavaScript 技术 实现 ， 具 体 实现 过 程 如 下 : 
(1) 在 页 面 中 添加 显示 电影 图 片 的 <div> 标 签 ， 同 时 插入 要 输出 的 影片 名 称 和 简介 等 信息 ， 并 且 
通过 CSS 控制 输出 内 容 的 样式 。 有 具体 代码 如 下 : ( 实例 位 置 : 资源 包 \ 源 码 \20\Movie\index.html ) 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
11 
12 
13 
14 
15 
16 
rg 
18 
19 
20 
21 
22 
23 
24 
25 
26 


<div id="demo" class="top_box" style="overflow: hidden; width: 1206px; height: 264px"> 
<table width="100%" cellpadding="0" cellspacing="0"> 


<td id="demo1"><table cellpadding="0" cellspacing="0"> 


<tr> 
<td width="191" height="200" style="padding-right:10px"> 
<a href="see/see6.html" target="_blank"> 
<img src="video/6.jpg" width="191" height="200" border="0" /> 
</a> 
<div class="title"><a href="see/see6.html" target="_blank"> 机 械 师 2: 复活 </a></div> 
<div class="content"> 冷 面 杀手 铁汉 柔情 </div></td> 
<td width="191" height="200" style="padding-right:10px"> 
<a href="see/see7.html" target="_blank"> 
<img src="video/7.jpg" width="191" height="200" border="0" /> 
</a> 
<div class="title"><a href="see/see7.html" target="_blank"> 变 形 金 刚 </a></div> 
<div class="content"> 以 动画 为 基础 的 创新 作品 </div></td> 
<td width="191" height="200" style="padding-right:10px"> 
<a href="see/see8.html" target="_blank"> 
<img src="video/8.jpg" width="191" height="200" border="0" /> 
</a> 
<div class="title"><a href="see/see8.html" target="”blank"> 暮 光 之 城 </a></div> 
<div class="content"> 吸 血 鬼 的 爱情 故事 </div></td> 
<td width="191" height="200" style="padding-right:10px"> 
<a href="see/see9.html" target="_blank"> 
<img src="video/9.jpg" width="191" height="200" border="0" /> 
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6 </a> 

28 <div class="title"><a href="see/see9.html" target="_blank"> 导 然 心动 </a></div> 
29 <div class="content"> 男 孩 女孩 间 的 有 趣 战争 </div></td> 

30 <td width="191" height="200" style="padding-right:10px"> 

31 <a href="see/see10.html" target="_blank"> 

32 <img src="video/10.jpg" width="191" height="200" border="0" /> 

33 </a> 

34 <div class="title"><a href="see/see10.html" target="”blank"> 飓 风 营 救 </a></div> 
35 <div class="content"> 老 特工 重新 出 山 </div></td> 

36 <td width="191" height="200" style="padding-right:10px"> 

37 <a href="see/see11.html" target="_blank"> 

38 <img src="video/11.jpg" width="191" height="200" border="0" /> 

39 </a> 

40 <div class="title"><a href="see/see11.html" target="”blank"> 罗 马 假日 </a></div> 
41 <div class="content"> 好 莱 坞 黑白 电影 经 典 之 作 </div></td> 

42 </tr> 

43 </table></td> 

44 <td id="demo2"></td> 

45 </tr> 

46 </table> 

47 </div> 


(2) 编写 JavaScript 代码 ， 定 义 Marquee() 方 法 实现 图 片 的 滚动 效果 ， 代 码 如 下 : ( 实例 位 置 : 资 
源 包 \ 源 码 \20\Movie\index.html ) 


01 <scripttype="text/javascript"> 

02 var speed=30; // 设 置 超时 时 间 

03 demo2.innerHTML=demo1.innerHTML; // 设 置 id 为 demo2 的 元 素 的 HTML 内 容 
04 ”// 设 置 图 片 向 左 滚动 

05 function Marquee(){ 

06 if(demo2.o0ffsetWidth-demo.scrollLeft<=0X{ 


07 demo.scrollLeft-=demo1.offsetWidth; 

08 }else{ 

09 demo.scrollLeft++; 

10 } 

ey 

12 var MyMar=setinterval(Marquee,speed); // 实 现 图 片 滚动 


13 /鼠标 移入 图 片 时 停止 滚动 

14 demo.onmouseover=function(}{ 

性 clearinterval(MyMar); 

16 } 

17 /鼠标 移 出 图 片 时 继续 滚动 

18 demo.onmouseout=function(){ 

19 MyMar=setlnterval(Marquee,speed); 
200) 

21 </script> 
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20.5.5 ”JavaScript 实现 浮动 窗口 


在 index.html 页 面 中 ,通过 JavaScript 脚本 插入 了 一 个 浮动 的 窗口 ， 通 过 这 个 浮动 窗口 可 以 实现 一 
些 扩 展 功能 。 浮 动 窗口 的 运行 结果 如 图 20.15 所 示 。 


365 鲍 
借 APP 


站 
扫 - 扫 


图 20.15 浮动 窗口 的 运行 结果 
浮动 窗口 的 设计 主要 使 用 了 JavaScript 技术 实现 ， 代 码 封装 于 floatjs 文件 中 ， 具 体 代码 如 下 :( 实 
例 位 置 : 资源 包 \ 源 码 \20\Movie\js\float.js ) 
01 var ImgW=parselnt(float.width); // 获 取 浮 动 窗口 的 宽度 


02 function permute(tfloor,Top,left)f 
03 /获取 纵向 滚动 条 滚动 的 距离 


04 var scrollTop=document.documentElement.scrollTop || document.body.scrollTop; 
05 buyTop=Top+scrollTop; // 获 取 图 片 在 垂直 方向 的 绝对 位 置 
06 document.all[tloor].style .top=buyTop+"px"; /设置 图 片 在 垂直 方向 的 绝对 位 置 


07 /获取 横向 滚动 条 滚动 的 距离 
08 var scrollLeft=document.documentElement.scrollLeft || document.body.scrollLeft; 
09 var buyLeft=scrollLeft+document.body.clientWidth-ImgW; // 获 取 图 片 在 水 平方 向 的 绝对 位 置 


10 document.allltfioor].style.left=buyLeft-left+"px"; // 设 置 图 片 在 水 平方 向 的 绝对 位 置 
11 } 
12 setinterval(‘permute("float",300,50)',1); /每 隔 1 毫秒 就 执行 一 次 permute() 函 数 


在 需要 加 载 浮动 窗口 的 页 面 中 ， 使 用 下 面 的 代码 来 加 载 floatjs 文件 :( 实例 位 置 : 资源 包 \ 源 码 
\20\Movie\index.html ) 


<script type="text/javascript" src="js/float.js"></script> 


20.5.6 jQuery 实现 滑动 门 效 果 


在 index.html 页 面 中 ,使 用 jQuery 技术 实现 了 滑动 门 的 效果 ， 通 过 编写 jQuery 代码 ， 实 现 电 影 排 
行 中 热 播 影片 和 经 典 影片 之 间 的 切换 。 当 用 户 将 鼠标 移动 到 “ 热 播 ” 选 项 卡 上 时 ， 页 面 中 将 显示 热 播 
影片 列表 ， 效 果 如 图 20.16 所 示 。 当 用 户 将 鼠标 移动 到 “经 典 ” 选 项 卡 上 时 ， 页 面 中 将 显示 经 典 影片 列 
表 ， 效 果 如 图 20.17 所 示 。 
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电影 排行 加 到 经 典 电影 排行 
1 终结 者 5 阿诺德 施 瓦 手 格 1 机 械 师 2: 复活 杰 森 斯 坦 森 
2 飓风 车 救 连 姆 . 尼 林 2 变形 金刚 希 亚 拉 博 夫 
3 我 是 传奇 威 尔 史密斯 3 蓝光 之 城 克 里 斯 汀 斯 图 尔 特 
术 夫 斯 4 圩 总 [ 动 | 到 全 呆 卡 罗 尔 
5 罗马 假日 格 里 高 利 派 克 5 电话 情 和 | 二 玫 特 卡尔 菲 
6 史密斯 夫妇 布 拉 德 皮特 6 超 几 抽 中 全 安德鲁 加 菲尔德 
7 午夜 部 后 克 里 斯 埃 文 斯 7 雷神 克 里 斯 海 姆 斯 沃 斯 
图 20.16 显示 热 播 影片 列表 20.17 显示 经 典 影片 列表 
在 Web 页 面 中 实现 滑动 门 的 效果 ， 原 理 比较 简单 ， 通 过 隐藏 和 显示 页 面 中 的 元 素来 切换 不 同 的 内 
具体 步 又 如 下 : 
(1) 在 页 面 中 定义 一 个 表格 ， 在 表格 的 单元 格 中 定义 一 个 <ul> 元 素 ， 并 设置 其 class 属性 值 为 tabs， 
在 该 元 素 中 添加 两 个 <li> 用 于 输出 “ 热 播 ” 和 “经 典 ” 两 个 滑动 选项 卡 ， 有 具体 代码 如 下 :〈 实例 位 置 : 


资源 包 \ 源 码 \20\Movie\index.html ) 
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01 <table width="100%" border="0" cellpadding="0" cellspacing="0" 
style="margin-top:0px;margin-left:5%;"> 


02 <tr> 

03 <td align="left" height="50" style="font-size:22px;" valign="bottom"> 电 影 排行 </td> 
04 <td align="center" valign="bottom"> 

05 <ul class="tabs"> 

06 <li><a name="#tab1"> 热 播 </a></li> 

07 <li><a name="#ab2"> 经 典 </a></li> 

08 </ul> 

09 </td> 

10 </tr> 

11 </table> 


(2) 在 页 面 中 定义 两 个 <div> 元 素 ， 其 id 值 分 别 为 tabl 和 tab2， 在 id 值 为 tabl 的 <div> 元 素 中 添 
加 热 播 影片 列表 ， 在 id 值 为 tab2 的 <div> 元 素 中 添加 经 典 影片 列表 ， 有 具体 代码 如 下 :( 实例 位 置 : 资源 
包 \ 源 码 \20\Movie\index.html ) 


01 <divid="tab1" class="tab_content"> 
02 <table width="95%" border="0" cellpadding="0" cellspacing="0" style="position:relative; 
margin-top: 2px;margin-left:5%;"> 


03 <script> 
04 var num = 1; // 定 义 影片 排名 变量 
05 var nameArr = new Array(" 终 结 者 5"," 飓 风 营 救 "," 我 是 传奇 "," 一 线 声 机 "," 罗 马 假日 "， 


"史密斯 夫妇 "," 午 夜 邂逅 "); /定义 影片 名 称 数组 
06 var dnumArr = new Array(" 阿 诺 德 . 施 瓦 辛 格 "" 连 姆 . 尼 森 "," 威 尔 .史密斯 "" 杰 森 .斯 坦 森 "， 

" 格 里 高 利 .派克 "," 布 拉 德 .皮特 "," 克 里 斯 . 埃 文 斯 "); // 定 义 影片 主演 数组 
07 for(var i=0; i<nameArrlength; i++ 多 
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08 document.write('<tr height="43">"); 

09 // 输 出 影片 排名 

10 document.write('<td width="26" align="center class="f_td">'+(numM++)+"</td>"); 

11 document.write('<td width="75" align="left" class="f_td"><a href="#">'+nameArr[i] 

12 +'</td>"); /| 输出 影片 名 称 
43 document.write('<td width="90" align="right" class="f_td">'+dnumArr[i] 

14 +'</td></tr>"); // 输 出 影片 主演 
5 } 

16 </script> 

17 </table> 

18 </div> 


19 <divid="tab2" class="tab_content"> 
20 <table width="95%" border="0" cellpadding="0" cellspacing="0" style="position:relative; 
margin-top: 2px;margin-left:5%;"> 


21 <script> 
22 var num = 1; /定义 影片 排名 变量 
23 var nameArr = new Array(" 机 械 师 2: 复活 "," 变 形 金 刚 "," 暮 光 之 城 "," 导 然 心动 "," 电 话 情缘 ", 


"超凡 蜘蛛 侠 "" 雷 神 "); /定义 影片 名 称 数组 
24 var dnumArr = new Array(" 杰 森 . 斯 坦 森 "," 希 亚 . 拉 博 夫 "," 克 里 斯 汀 .斯 图 尔 特 "," 玛 德 琳 . 卡 罗 尔 "， 

" 杰 西 . 麦 特 卡尔 菲 "," 安 德 鲁 .加 菲尔德 "," 克 里 斯 . 海 姆 斯 沃 斯 ")，// 定 义 影片 主演 数组 
25 for(var i=0; i<nameArr.length; i++ 多 


26 document.write('<tr height="43">'); 
27 // 输 出 影片 排名 
28 document.write('<td width="26" align="center" class="f_td">'+(num++)+"'</td>"); 
29 document.write('<td width="75" align="left" class="f_td"><a href="#">'+nameArr[i] 
+'</td>"); // 输 出 影片 名 称 
30 document.write('<td width="90" align="right" class="f_td">'+dnumArr[i] 
+'</td></tr>"); // 输 出 影片 主演 
31 
32 </script> 
33 </table> 
34 </div> 


(3) 在 页 面 中 定义 CSS 样式 ， 用 于 控制 页 面 显示 效果 ， 具 体 代码 如 下 :( 实例 位 置 : 资源 包 \ 源 码 \ 
20\Movie\css\style.css ) 


01 ul.tabs{ 

02 list-style:none; 
03 margin-left:70px; 
Ca 

05 ul.tabs li{ 

06 margin: 0; 

07 padding: 0; 

08 float:left; 

09 width:50px; 

10 height: 26px; 


11 line-height: 26px; 
12 font-size:16px; 
1 
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14 ul.tabs li aactive{ 

45 display:block:; 

16 width:50px; 

A height: 26px; 

18 line-height: 26px; 

19 background-color#66CCFF; 
20 color:#FFFFFF:; 

| Cursor:pointer; 


(4) 在 页 面 中 编写 jQuery 代码 ， 当 用 户 将 鼠标 移 到 某 选项 卡 上 时 ， 为 该 选项 卡 添加 样式 ， 并 显 
示 相 对 应 的 <div> 中 特定 的 内 容 ， 具 体 代码 如 下 :( 实例 位 置 : 资源 包 \ 源 码 \20\Movie\index.html ) 


01 <scripttype="text/javascript"> 
02 $(document).ready(function() { 


03 S$("tab_content").hide(); // 将 class 值 为 tab_content 的 div 隐 茂 

04 S$("ultabs ia:first").addClass("active"); // 为 第 一 个 选项 卡 添加 样式 

05 $(".tab_content:first").show(); /将 第 一 个 class 值 为 tab_content 的 div 显示 
06 $("ul.tabs li a").hover(function() { // 将 鼠标 移 到 某 选 项 卡 上 

07 $("ul.tabs li a").removeClass("active"); // 移 除 样式 

08 S$(this).addClass("active"); // 为 当前 的 选项 卡 添加 样式 

09 $(".tab_content").hide(); // 将 所 有 class 值 为 tab_content 的 div 隐藏 
10 var activeTab = $(this).attr("name"); // 获 取 当 前 选项 卡 的 name 属性 值 

11 $(activeTab).show(); // 将 相同 id 值 的 div 显示 

12 入 

13 六 

14 </script> 


20.5.7 jQuery 实现 向 上 间断 滚动 效果 


在 网 站 的 首页 中 实现 了 即将 上 线 影 片 信息 向 上 间断 滚动 的 效果 ， 通 过 jQuery 中 的 animate0 方 法 可 
以 实现 这 个 功能 。 即 将 上 线 影片 信息 向 上 间断 滚动 的 运行 结果 如 图 20.18 所 示 。 


即将 上 线 


《 旦 球 大 战 外 传 》 科 幻 关 不 容错 过 


重 现 战 


图 20.18 影片 信息 向 上 滚动 
有 具体 实现 过 程 如 下 : 
(1) 在 页 面 中 首先 创建 一 个 表格 和 一 个 div 标签 ， 并 设置 div 的 class 属性 值 为 scroll， 然 后 在 div 
中 定义 一 个 用 于 实现 动态 滚动 的 影片 信息 列表 ， 有 具体 代码 如 下 : (实例 位 置 : 资源 包 \ 源 码 \20\Movie\ 
index.html ) 
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01 <table width="100%" border="0" cellpadding="0" cellspacing="0" 
style="margin-top:0px;margin-left5%:"> 


02 <tr> 

03 <td align="left" height="50" style="font-size:22px;" valign="bottom"> 即 将 上 线 </td> 
04 </tr> 

05 </table> 

06 <divclass="scroll"> 

07 <ul class="list"> 

08 <li><a href="#"> 《荒野 大 镖 客 》 重 磅 来 闭 </a>< 中 > 

09 <li><a href="#*>《 星 球 大 战 外 传 》 科 幻 迷 不 容错 过 </a></li> 
10 <li><a href="#">《 野 牲 敢死队 》 重 现 战场 </a></li> 

11 <li><a href="#'>《 九 死 一 生 》 原 始 从 林 探 险 </a></li> 

12 <li><a href="#*>《 荒 野 猎 人 》 莱 昂 纳 多 复仇 与 熊 搏斗 </a></li> 
13 </ul> 

14 </div> 


(2) 在 页 面 中 定义 CSS 样式 ， 用 于 控制 页 面 显 示 效 果 ， 有 具体 代码 如 下 : ( 实例 位 置 : 资源 包 \ 源 码 \ 
20\Movie\css\style.css ) 


01 .scroll{ 

02 margin-left:10px; 
03 margin-top: 10px; 
04 width:270px; 
05 height120px; 
06 overflow:hidden; 
07 } 

08 .scrollli{ 

09 width:270px; 
10 height:30px; 
11 line-height:30px; 
12 margin-left:26px; 
i300 

14 .scrolllia{ 

15 font-size:14px; 
16 Color:#333; 

17 text-decoration:none; 
18 } 

19 .scrolllia:hover{ 

20 color:#66CCFF:; 
By 


(3) 在 页 面 中 编写 jQuery 代码 ， 定 义 滚 动 函数 autoScroll0 实 现 影片 信息 向 上 滚动 的 效果 ， 然 后 
定义 超时 函数 setInterval0， 设 置 每 过 3 秒 执行 一 次 滚动 函数 。 有 具体 代码 如 下 : ( 实例 位 置 : 资源 包 \ 源 码 \ 
20\Movie\index.html ) 


01 $(document).ready(function(X{ 


02 $(".scroll").hover(function(X{ /鼠标 指向 滚动 区 域 
03 clearTimeout(timelD); /中止 超时 ， 即 停止 滚动 
04 },function(){ /鼠标 离开 滚动 区 域 
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05 timelD=setInterval(‘autoScroll(),3000); // 设 置 超时 函数 ， 每 过 3 秒 执行 一 次 函数 
06 六 

07 J; 

08 function autoScroll(X{ 

09 $(".scroll").find(".list").animate({ // 自 定义 动画 效果 

10 marginTop : "-25px" 

11 },500,function(){ 

12 /把 列表 第 1 行内 容 移动 到 列表 最 后 

13 S$(this).css({"margin-top" : "Opx"}).find("li-first").appendTo(this); 

性 » 


// 设 置 超时 函数 ， 每 过 3 秒 执行 一 次 函数 


在 影片 分 类 展示 的 页 面 中 ,用 户 不 但 可 以 通过 单 击 电影 图 片 、 电 影 名 称 或 加 图 标 打 开 影 片 播 放 页 面 
进行 观看 , 还 可 以 单 击 日 图 标 打开 电影 详情 页 面 查看 影片 详情 。 打 开 影 片 详情 页 面 的 运行 结果 如 图 20.19 
所 示 。 


€) haoyllocalhosv 


电影 详情 


发 行 时 间 : 2008-04-09 


读 片 讲述 的 是 Bryan ( 连 姆 . 尼 森 饰 》 是 一 名 退休 的 } 


工 ， 常 年 的 特工 生活 使 其 与 事 了 女儿 的 关系 


越 末 超 琉 远 一 次 ,女儿 Kim ( 玛 答 衬 著 煌 饰 ) 候 1 an 问 音 去 巴黎 凌 玩 ， 身 为 父 寺 的 Brran 时 
不 雹 | 儿 独 自 出 行 ， 在 一 短 争 吵 后 ， 固 专 的 3raa 终 于 答应 女儿 。 然而 在 巴 笋 ，Kan 却 和 


到 了 黑帮 去 竺 团伙 的 扮 夫 。 为 拯 技 女 儿 ， 这 名 老 特工 重新 出 山 。 
@ memet1 SA 可 福 ” 一 10038 > 


图 20.19 影片 详情 页 面 
打开 影片 详情 页 面 主要 通过 JavaScript 中 的 open0 方 法 实现 。 以 影片 “飓风 营救 ”为 例 ， 打 开 该 影 
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片 详情 页 面 的 具体 实现 过 程 如 下 : 

(1) 在 intro 文件 夹 下 创建 mntro10.html 文件 ， 在 页 面 中 输出 影片 “飓风 营救 ”的 详细 信息 ， 包 括 
电影 图 片 、 电 影 名 称 、 导 演 、 主 演 以 及 影片 详情 等 信息 ， 具 体 代码 如 下 :( 实例 位 置 : 资源 包 \ 源 码 \ 
20\Movie\intro\intro10.html ) 


01 <table width="660"> 

02 <tr> 

03 <td width="34">&nbsp;</td> 

04 <td colspan="3"><span class="moviedetail"> 电 影 详情 </span></td> 
05 </tr> 

06 <tr> 

07 <td width="34"></td> 

08 <td colspan="2" height="1" bgcolor="#eSeSeS5"></td> 
09 </tr> 

10 <tr> 

1 <td></td> 

12 <td align="left" valign="top" style="padding-top:30px;"> 


13 <table width="98%"> 

14 <tr> 

5 <td width="20%" align="left" valign="middle"> 

16 <img src="../video/10.jpg" width="280" height="362" class="pic"/> 
17 </td> 

18 <td width="80%" align="left" valign="top"> 

19 <table style="margin-top:10px; padding-left:20px;"> 

20 <tr> 

21 <td height="60" class="moviename"> 飓 风 营 救 </td> 
22 </tr> 

23 <tr> 

24 <td width="280" height="50"> 导 演 : 皮 埃 尔 . 莫 瑞 尔 </td> 
25 </tr> 

26 <tr> 

27 <td height="50"> 主 演 : 连 姆 . 尼 森 </div></td> 

28 </tr> 

29 <tr> 

30 <td height="50"> 类 型 : 动作 片 </td> 

31 </tr> 

32 <tr> 

33 <td height="50"> 语 言 : 英文 </td> 

34 </tr> 

35 <tr> 

36 <td height="50"> 发 行 时 间 : 2008-04-09</td> 

37 </tr> 

38 </table> 

39 </td> 

40 </tr> 

41 <tr> 

42 <td height="48" colspan="2">&nbsp;&nbsp; 影 片 详情 :</td> 
43 </tr> 

44 <tr> 
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45 <td colspan="2" class="movieintro">&nbsp;&nbsp; 该 片 讲述 的 是 Bryan ( 连 姆 . 尼 森 饰 ) 是 一 名 退休 
的 特工 ， 常 年 的 特工 生活 使 其 与 妻子 女儿 的 关系 越 来 越 琉 远 。 一 次 ， 女 儿 Kim 〈 玛 姬 . 格 蕾 斯 饰 ) 想 征 得 Bryan 同 
意 去 巴黎 游玩 ， 身 为 父亲 的 Bryan 并 不 放心 17 岁 的 女儿 独自 出 行 ， 在 一 番 争吵 后 ， 固 执 的 Bryan 终于 答应 女儿 。 
然而 在 巴黎 ，Kim 却 遭 到 了 黑帮 卖淫 团伙 的 拐卖 。 为 拯救 女儿 ， 这 名 老 特工 重新 出 山 。</td> 


47 </table> 
48 </td> 

49 </tr> 

50 </table> 


(2) 在 动作 电影 分 类 页 面 action.html 中 ， 为 影片 “飓风 营救 ”的 日 图标 添 加 onclick 事件 ， 通 过 
JavaScript 中 的 open0 方 法 打开 影片 详情 页 面 ， 关 键 代码 如 下 :( 实例 位 置 : 资源 包 \ 源 码 \20\Movie\ 
action.html ) 


<img src="images/show_icon.png”alt=" 介 绍 ”border="0"” style="cursor:pointer;"” onclick="javascript:window. 
open('intro/intro10.html','new','height=660,width=690,top=100,left=400");"/> 


20.7 小 结 


本 章 使 用 JavaScript、Ajax 和 jQuery 等 目前 的 主流 技术 ， 制 作 了 一 个 简单 的 影视 网 站 。 通 过 本 章 
的 学 习 ， 希 望 读者 可 以 掌握 网 页 的 页 面 框架 设计 ， 以 及 网 页 中 JavaScript 和 jQuery 技术 的 应 用 。 
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